Create SVG elements with JS (bug?)
<p>I am trying to create a variety of different SVG elements (circle, rectangle, etc.) with JavaScript and insert them into a previously created SVG container element (also created with JavaScript).</p>

<p>The process works fine with a circle and an ellipse, but not so much with a rectangle and a line.</p>

<p>The elements are created and inserted into the DOM. You can inspect the SVG and you will find them there, but they are not rendered.</p>

<p>Strange (tested in Chrome &amp; FF): if you cut out either the rectangle or the line from the dom (ctrl-x) and re-insert them (you have to click on a different element in between to update the dom), then they show up.</p>

<p><a href="https://jsfiddle.net/tricon/7zc8gz8x/" rel="nofollow">Here's</a> the fiddle for the experiment.</p>

<p>And here's the code:</p>

<pre><code>var cont = document.getElementById('container');

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "200");
svg.setAttribute("height", "200");
svg.setAttribute("version", "1.1");
svg.setAttribute("id", "mysvg");

var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
ellipse.setAttribute("fill", "green");
ellipse.setAttribute("stroke", "black");
ellipse.setAttribute("cx", "45");
ellipse.setAttribute("cy", "45");
ellipse.setAttribute("rx", "40");
ellipse.setAttribute("ry", "20");
svg.appendChild(ellipse);

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("fill", "orange");
circle.setAttribute("stroke", "black");
circle.setAttribute("stroke-width", "1")
circle.setAttribute("cx", "70");
circle.setAttribute("cy", "60");
circle.setAttribute("r", "30");
svg.appendChild(circle);

var rect = document.createElementNS("http://www.w3c.org/2000/svg", "rect");
rect.setAttribute("fill", "red");
rect.setAttribute("stroke", "black");
rect.setAttribute("stroke-width", "1")
rect.setAttribute("x", "40");
rect.setAttribute("y", "40");
rect.setAttribute("width", "80");
rect.setAttribute("height", "50");
svg.appendChild(rect);

var line = document.createElementNS("http://www.w3c.org/2000/svg", "line");
line.setAttribute("stroke", "purple");
line.setAttribute("stroke-width", "15");
line.setAttribute("x1", "30");
line.setAttribute("y1", "170");
line.setAttribute("x2", "130");
line.setAttribute("y2", "20");
svg.appendChild(line);

cont.appendChild(svg);
</code></pre>