CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Vineet Markan
Vineet Markan

Reputation: 63

Does SVG not work like conventional DOM?

I am just starting out with SVGs. I have noticed that even with SVG and exactly the same DOM, the results may look different on the display.

Look at this js fiddle(http://jsfiddle.net/ZHukw/). Its a simple rectangle inside SVG canvas.

The rectangle is visible if you copy paste the rectangle node directly into HTML but if you add the rectangle through Jquery, it simply wont show on screen. So the final DOM output is same but display is different.

Am I missing something?

HTML: 

<svg id='svg'>

</svg>

JS:

$('#svg').attr('width',1600)
$('#svg').attr('height',1600)

$('#svg').append('<rect width="200" height="200" fill="black"></rect>')

Upvotes: 1

Views: 79

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109252

The problem with adding the rect element as text is that it gets interpreted in the wrong namespace (HTML instead of SVG). When you're specifying it statically, the namespace is obvious from the context.

One fix is to explicitly create the node with the correct namespace and append it.

var el = document.createElementNS('http://www.w3.org/2000/svg', "rect");
el.setAttribute("width", 200);
el.setAttribute("height", 200);
el.setAttribute("fill", "black");
$('#svg').appendChild(el);

Upvotes: 6

Related Questions