SVG不能像传统DOM那样工作吗？

Question

我刚刚开始使用SVG.我注意到即使使用SVG和完全相同的DOM,结果在显示器上看起来也可能不同.

看看这个js小提琴(http://jsfiddle.net/ZHukw/).它是一个SVG画布内的简单矩形.

如果您将矩形节点直接粘贴到HTML中,但是如果您通过Jquery添加矩形,则矩形是可见的,它只是不会在屏幕上显示.所以最终的DOM输出是相同的,但显示是不同的.

我错过了什么吗？

HTML:

<svg id='svg'>

</svg>

JS:

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

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

Answer 1

将rect元素添加为文本的问题在于它被错误的命名空间(HTML而不是SVG)解释.当您静态指定它时,命名空间在上下文中是显而易见的.

一种解决方法是使用正确的命名空间显式创建节点并附加它.

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