XHTML5のSVG：適切な名前空間で属性を設定する

Question

TL; DR要約：SVG要素にsetAttributeNSの代わりにsetAttributeを使用するのが適切ですか？

詳細：
を動的に作成し、図面に要素を追加するためにJavaScriptを使用していますXHTML5に埋め込まれ、このSVGイメージを考えてみましょう：JavaScriptのによって作成され、<svg>要素に追加http://phrogz.net/svg/svg_in_xhtml5.xhtml

SVG要素を作成する必要があります...

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

...代わりに...

を使用して0

...それらをSVG要素として扱い、ブラウザでレンダリングするためです。これは妥当かつ理解可能です。

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

を私がやっているもの：しかし、this pageによると、私はまた、代わりに私が現在使用しているコードの... ...

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

を使用して、これらの要素の属性を設定する必要がありますChrome、Safari、Firefoxで動作します。私が持っているもの法的コード - これは推奨に相当するか、それともが起こるのでしょうか？ブラウザの性質上、が有効になるのですが、setAttributeNSを有効にする必要がありますか？

Answer 1

名前空間の属性（接頭辞付きまたはなし）を使用しない限り、setAttributeを使用できます。

setAttributeNSの推奨は、さまざまな方法（およびどちらの方法をいつ使用するか）を心配する必要がないため、良い方法です。 xlink：hrefやカスタム名前空間の属性などを変更する必要がある場合は、setAttributeNSのみが必要です。一方、人々は名前空間を間違えてしまいます（svg属性のためにNULLの代わりに例えばsvg名前空間を使用しようとしている）ので、IMHOをあまり混乱させないものは明確ではありません。

DOM 2 Coreは、DOMレベル1のget/setAttributeメソッドのメソッドについては、これを言う：

DOMレベル1メソッドは、名前空間 無知です。したがって、 を名前空間で扱わないとこれらのメソッドを使用することは安全ですが、それらを使用して同時に 新しいものは避けるべきです。 を避けてください。

「同時に」は、「同じ（意図された）属性で同時に」、またはそれに類するものを読み込んでいるはずです。

SVG自体では、SVGマークアップ自体を除いてスクリプトが「合法」である必要はありませんが、SVG 1.1の場合はDOM 2コアなどの特定のDOM仕様をサポートする必要があります。