javascript - SVG 不像传统的 DOM 那样工作吗？

Question

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

看看这个 js fiddle( http://jsfiddle.net/ZHukw/ )。它是 SVG Canvas 内的一个简单矩形。

如果您将矩形节点直接复制粘贴到 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);