XHTML5中的SVG:使用适当的命名空间设置属性

Question

TL; DR摘要:使用setAttribute而不是setAttributeNSSVG元素是否合适？

详细信息:
考虑嵌入在XHTML5中的此SVG图像,该图像使用JavaScript动态创建和向图形添加元素:http://phrogz.net/svg/svg_in_xhtml5.xhtml

<svg>必须使用JavaScript创建由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它才有效？

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.