XHTML5 中的 SVG：使用适当的命名空间设置属性
TL;DR 摘要：对于 SVG 元素，使用 setAttribute 而不是 setAttributeNS 是否正确？
详细信息：
考虑嵌入在 XHTML5 中的 SVG 图像，它使用 JavaScript 动态创建元素并将其添加到绘图中： http://phrogz .net/svg/svg_in_xhtml5.xhtml
由 JavaScript 创建并附加到 元素的 SVG 元素必须使用 ...
var el = document.createElementNS("http://www.w3.org/2000/svg",'foo');
...而不是 ...
var el = document.createElement('foo');
创建。 ..为了将它们视为 SVG 元素并在浏览器中呈现。这是合理且可以理解的。但是，根据此页面，我还应该设置这些元素的属性使用...
el.setAttributeNS( null, 'foo', 'bar' );
...而不是我当前使用的代码：
el.setAttribute( 'foo', 'bar' );
我正在做的事情适用于 Chrome、Safari 和 Firefox。我拥有的合法代码 - 它是否等同于建议 - 或者它是否只是由于浏览器的宽容性质而发生工作，而我必须使用setAttributeNS 有效吗？
TL;DR Summary: Is it proper to use setAttribute instead of setAttributeNS for SVG elements?
Details:
Consider this SVG image embedded in XHTML5 that uses JavaScript to dynamically create and add elements to the drawing: http://phrogz.net/svg/svg_in_xhtml5.xhtml
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');
...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' );
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
只要您不使用命名空间属性（带或不带前缀），您就可以使用 setAttribute。
setAttributeNS 建议在某种程度上是好的，因为这样您就不必担心使用不同的方法（以及何时使用哪个方法）。当您需要更改例如 xlink:href 或自定义命名空间属性时，您实际上只需要 setAttributeNS。另一方面，人们确实弄错了名称空间（有时尝试使用例如 svg 名称空间而不是 NULL 来表示 svg 属性），因此不清楚什么是不那么令人困惑的恕我直言。
DOM 2 Core 说的是关于 DOM Level 1 get /setAttribute 方法：
我可能会补充说，“同时”应该读为“同时在同一（预期）属性上”，或类似的内容。
除了 svg 标记本身之外，SVG 本身并不要求您的脚本“合法”或类似的内容，但它确实需要支持某些 DOM 规范，例如 SVG 1.1 中的 DOM 2 Core。
As long as you don't use namespaced attributes (with or without a prefix) you can use setAttribute.
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 says this about the DOM Level 1 get/setAttribute methods:
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 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.