Update SvgOverlay code example (Leaflet#6658)

* update SVGOverlay example * update generated docs
Schleuse · Dec 3, 2019 · 0c435c7 · 0c435c7
1 parent 9c074e4
commit 0c435c7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/docs/reference-1.5.0.html b/docs/reference-1.5.0.html
@@ -7603,9 +7603,12 @@ <h3 id='svgoverlay-example'>Usage example</h3>
 
 
 
-<pre><code class="lang-js">var element = &#39;&lt;svg width=&quot;200&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;&lt;image xlink:href=&quot;https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png&quot; height=&quot;200&quot; width=&quot;200&quot;/&gt;&lt;/svg&gt;&#39;,
-         elementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
-L.svgOverlay(element, elementBounds).addTo(map);
+<pre><code class="lang-js">var svgElement = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;svg&quot;);
+svgElement.setAttribute(&#39;xmlns&#39;, &quot;http://www.w3.org/2000/svg&quot;);
+svgElement.setAttribute(&#39;viewBox&#39;, &quot;0 0 200 200&quot;);
+svgElement.innerHTML = &#39;&lt;rect width=&quot;200&quot; height=&quot;200&quot;/&gt;&lt;rect x=&quot;75&quot; y=&quot;23&quot; width=&quot;50&quot; height=&quot;50&quot; style=&quot;fill:red&quot;/&gt;&lt;rect x=&quot;75&quot; y=&quot;123&quot; width=&quot;50&quot; height=&quot;50&quot; style=&quot;fill:#0013ff&quot;/&gt;&#39;;
+var svgElementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
+L.svgOverlay(svgElement, svgElementBounds).addTo(map);
 </code></pre>
 
 

diff --git a/src/layer/SVGOverlay.js b/src/layer/SVGOverlay.js
@@ -14,9 +14,12 @@ import * as Util from '../core/Util';
  * @example
  *
  * ```js
- * var element = '<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/></svg>',
- * 		 elementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
- * L.svgOverlay(element, elementBounds).addTo(map);
+ * var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ * svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
+ * svgElement.setAttribute('viewBox', "0 0 200 200");
+ * svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
+ * var svgElementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
+ * L.svgOverlay(svgElement, svgElementBounds).addTo(map);
  * ```
  */