XHTML5中的SVG：使用適當的名稱空間設置屬性

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。我有什麼法定代碼 - 它相當於推薦 - 或只是發生工作，由於瀏覽器的寬容性質，我必須改爲使用setAttributeNS有效嗎？

Answer 1

只要你不使用名稱空間屬性（帶或不帶前綴），你可以使用setAttribute。

setAttributeNS建議在某種程度上是不錯的，因爲那樣你就不必擔心使用不同的方法（以及何時使用哪一種方法）。當需要更改例如xlink：href或自定義名稱空間屬性時，您確實只需要setAttributeNS。另一方面，人們確實會得到錯誤的命名空間（有時候試圖使用例如svg命名空間而不是NULL來表示svg屬性），所以目前還不清楚什麼是不那麼容易混淆的恕我直言。

DOM 2 Core說，這對DOM級別1 GET /的setAttribute方法：

DOM 1級方法命名空間 無知。因此，儘管 使用這些方法時不會使用 命名空間，但使用它們和 同時應該避免使用新的方法 。

我可能會補充說，「在同一時間」也許應該讀「同一時間（有意）的屬性」，或類似的東西。

SVG本身並不要求您的腳本「合法」或類似的東西，除了svg標記本身，但它確實需要支持某些DOM規範，如SVG 1.1中的DOM 2 Core。