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