Question

In the following code, I attempt to create an SVG circle on the screen in two different ways.

var body = document.getElementsByTagName('body')[0];
var vis = document.createElementNS("http://www.w3.org/2000/svg", "svg");
body.appendChild(vis);
vis.setAttribute('width',400);
vis.setAttribute('height',300);

var xmlString = '<circle r="300"></circle>'
            , parser = new DOMParser()
            , doc = parser.parseFromString(xmlString, "text/xml");
c1 = doc.firstChild;

c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute('r','300')

//for(x in c1) {c1[x] = c2[x]}

vis.appendChild(c1);

The first way vis.appendChild(c1); doesn’t display, yet, if I replace c1 on that line with c2 it works. Furthermore, if I put back c1 and then uncomment the line that basically clones c2 into c1, it still doesn’t work.

So I know this has to be some problem with the browser not understanding what a “circle” is if I don’t use the base namespace http://www.w3.org/2000/svg, but what I don’t know is how to fix it.

Question: How can I parse an arbitrary svg string, insert it into the DOM, and get the browser to understand how to display it?

Answer 1

What’s wrong with using the base (i,e. SVG) namespace like this?

<circle r="300" xmlns="http://www.w3.org/2000/svg"></circle>