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

我刚从SVG开始。我注意到，即使使用SVG和完全相同的DOM，结果在显示器上可能会有所不同

看看这个js fiddle（）。它是SVG画布中的一个简单矩形

如果您将矩形节点直接复制粘贴到HTML中，则该矩形可见，但如果您通过Jquery添加该矩形，则它不会显示在屏幕上。因此，最终的DOM输出是相同的，但显示是不同的

我错过什么了吗

HTML:

<svg id='svg'>

</svg>

JS:

$（'#svg'）.attr（'width'，1600）
$（'#svg'）.attr（'height'，1600）
$（'#svg'）。追加（''）

将

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

---

将

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

---

您可能有名称空间问题，因为SVG不在通常的HTML名称空间中。您可能需要签出。也可以考虑使用SVQuery代替SVQuery。SVG可能不存在名称空间问题，因为SVG不存在于通常的HTML命名空间中。您可能需要签出。也可以考虑使用SVQuery代替SVG。嘿，谢谢小费！这适用于。append而不是appendChildHey谢谢你的提示！这适用于.append而不是appendChild