createElementNSで処理されないと動的SVGが動作しない理由

Question

私は平文JSでSVGを操作しようとしていましたが、createElementNSとsetAttributeNSのようなメソッドを使用しないと意図したとおりに動作しません。

<svg id="mydsvg" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

上記のマークアップは完全に機能します。しかし、次のコードで別のサークルを追加しようとすると、そのサークルは表示されません。

var circle = createElement('circle'); 
circle.setAttribute('cx', 50); 
.... 
document.getElementById('mysvg').appendChild(circle); 

しかし、あなたはcreateElementNSとsetAttributeNSを使用する場合に予想されるとして、それが動作します。

最悪の場合、createElementとcreateElementNSは同じDOMテキストを作成します。

Answer 1

SVG要素がSVG名前空間に存在し、createElementがhtml名前空間に要素を作成する必要があると仕様で規定されているため、動作しません。パーサーは、src属性で動作するhtmlの<a>要素を作成するか、 `xlink：href属性が必要なSVG <a>要素を作成するかをパーサーがどのように知っていますか？

htmlでは、名前空間がシリアル化されていないものは同じように見えます。名前空間がシリアライズされるXMLではそうではありません。 HTMLで

SVGは、スタンドアロン文書として

<svg id="mydsvg" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

SVGは、円がその親の名前空間を継承し、この

<svg xmlns="https://www.w3.org/2000/svg" id="mydsvg" width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

のようになります...このようになります。