XHTML5中的SVG：使用适当的命名空间设置属性 [英] SVG in XHTML5: setting attributes with proper namespace

问题描述

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

TL;DR Summary: Is it proper to use setAttribute instead of setAttributeNS for SVG elements?

详细信息：

考虑嵌入在XHTML5中的这个SVG图像，该图像使用JavaScript动态创建和添加图纸的元素： http://phrogz.net/svg/svg_in_xhtml5.xhtml

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

The SVG elements created by JavaScript and appended to the <svg> element must be created using...

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

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

...instead of...

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

...以便将它们视为SVG元素并在浏览器中呈现。这是合理的，也是可以理解的。但是，根据此页面，我还应该设置这些元素的属性使用...

...in order for them to be treated as SVG elements and rendered in the browser. This is reasonable and understandable. However, according to this page I should also be setting the attributes of these elements using...

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

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

...instead of the code I'm using currently:

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

我在Chrome，Safari和Firefox中的工作原理。我拥有合法代码 - 它是否等同于推荐 - 或者只是因为浏览器的宽松性而发生才能工作，我必须使用 setAttributeNS 有效吗？

What I am doing works in Chrome, Safari, and Firefox. Is what I have legal code—is it equivalent to the recommendation—or does it just happen to work due to the permissive nature of browsers and I must instead use setAttributeNS to be valid?

推荐答案

只要你不使用命名空间属性（有或没有前缀）你可以使用setAttribute。

As long as you don't use namespaced attributes (with or without a prefix) you can use setAttribute.

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

The setAttributeNS recommendation is good in a way, because then you don't need to worry about using different methods (and when to use which one). You really only need setAttributeNS when you need to change e.g xlink:href or custom namespaced attributes. On the other hand people do get the namespaces wrong (sometimes trying to use e.g the svg namespace instead of NULL for svg attributes), so it's not clear what is less confusing IMHO.

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

DOM 2 Core says this about the DOM Level 1 get/setAttribute methods:

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

DOM Level 1 methods are namespace ignorant. Therefore, while it is safe to use these methods when not dealing with namespaces, using them and the new ones at the same time should be avoided.

我可能会补充说同时应该同时读取相同（预期）属性或类似的东西 。

I might add that "at the same time" should maybe have read "at the same time on the same (intended) attribute", or something similar.

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

SVG itself doesn't require your scripts to "be legal" or anything like that except for the svg markup itself, but it does require support for certain DOM specifications, such as DOM 2 Core in the case of SVG 1.1.

这篇关于XHTML5中的SVG：使用适当的命名空间设置属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！