Question

TL; DR摘要：对于SVG元素，使用setAttribute代替setAttributeNS是否合适？

详情：
考虑嵌入在XHTML5中的此SVG图像，该图像使用JavaScript动态创建元素并将其添加到图形中：http://phrogz.net/svg/svg_in_xhtml5.xhtml

由JavaScript创建并附加到<svg>元素的SVG元素必须使用...

创建

var el = document.createElementNS("http://www.w3.org/2000/svg",'foo');

......而不是......

var el = document.createElement('foo');

...以便将它们视为SVG元素并在浏览器中呈现。这是合理的，也是可以理解的。但是，根据this page，我还应该使用...

设置这些元素的属性

el.setAttributeNS( null, 'foo', 'bar' );

...而不是我目前正在使用的代码：

el.setAttribute( 'foo', 'bar' );

我正在做的事情适用于Chrome，Safari和Firefox。我拥有合法代码 - 它是否等同于推荐 - 或者由于浏览器的宽松性而只是发生才能工作，而我必须使用{{1有效吗？

Answer 1

只要您不使用命名空间属性（带或不带前缀），您就可以使用setAttribute。

setAttributeNS建议在某种程度上是好的，因为那样你就不必担心使用不同的方法（以及何时使用哪种方法）。当您需要更改例如xlink：href或自定义命名空间属性时，您实际上只需要setAttributeNS。另一方面，人们确实错误地命名空间（有时试图使用例如svg命名空间而不是svg属性的NULL），所以不清楚什么是不那么令人困惑的恕我直言。

DOM 2 Core说到DOM Level 1 get / setAttribute方法：

DOM Level 1方法是命名空间愚昧。因此，虽然它是安全的在不处理时使用这些方法使用命名空间，使用它们和同时应该是新的避免。

我可能会补充一点，“同时”应该“同时读取相同（预期）属性”或类似内容。

SVG本身并不要求你的脚本“合法”或类似的东西，除了svg标记本身，但它确实需要支持某些DOM规范，例如在SVG 1.1的情况下的DOM 2 Core。 / p>

HTML5中的SVG：使用适当的命名空间设置属性

1 个答案: