Create SVG elements with JS (bug?)

Question

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).

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

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.

Strange (tested in Chrome & 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.

Here's the fiddle for the experiment.

And here's the 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);

Answer 1

You've a typo in the namespace for the rect and line elements it's w3 and not w3c

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.w3.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.w3.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);

container.appendChild(svg);

<div id="container"></div>