Question

我试图在普通JS中操纵SVG，并发现如果我不使用createElementNS和setAttributeNS等方法，它就不会按预期行事。

<svg id="mydsvg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

以上标记完美无缺。但是，如果您尝试通过以下代码添加另一个圈子，则您将无法看到它。

var circle = createElement('circle');
circle.setAttribute('cx', 50);
....
document.getElementById('mysvg').appendChild(circle);

但是如果您使用createElementNS和setAttributeNS，它将按预期工作。

最糟糕的是，createElement和createElementNS都会创建相同的DOM文字。

Answer 1

它不起作用，因为规范说SVG元素必须存在于SVG名称空间中，而createElement在html名称空间中创建元素。解析器如何知道是否要创建一个html <a>元素，该元素适用于src属性或需要`xlink：href属性的SVG <a>元素。

在html中，名称空间没有被序列化，事情看起来是一样的。在XML中，命名空间被序列化，他们不会。

html中的SVG看起来像这样......

<svg id="mydsvg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

作为独立文档的SVG看起来像这样

<svg xmlns="https://www.w3.org/2000/svg" id="mydsvg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

圆圈继承了其父级的命名空间。

如果不通过createElementNS处理，为什么不会动态SVG工作

1 个答案: