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

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

1 个答案: