SVGパスが表示されないのはなぜですか？

Question

私はいくつかのノードの上に座っているSVGを持っています、そして、私はそのようなノードに接続できるようにSVGパスを動的に描いています。しかし、いったんパスを生成すると、何らかの理由でパスが表示されません。

ここで最も奇妙な部分は... 私は私のinspect要素の中に入って、HTMLをちょっと編集してもう一度レンダリングすれば表示されます。。ここで

はGIFです：

ここでパスを生成するコードです：

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
path.setAttributeNS(null, 'id', 'path' + index); 
path.setAttributeNS(null, 'd', 'M0 0'); 
path.setAttributeNS(null, 'stroke', '#484848'); 
path.setAttributeNS(null, 'fill', 'none'); 
path.setAttributeNS(null, 'stroke-width', '4px'); 

あなたが実際に実際の例を見て、私はしている場合それは良いでしょうが、ここにペンがあります：http://codepen.io/anon/pen/OWaEdd

困っている人を助けてください。パスが生成されたときに私のパスが表示されない理由を知りたい（そして修正したい）。私は大いにそれを感謝します！

Answer 1

createElementNSを使用して<path>を作成するときは、SVG名前空間に要素を作成する必要があることがわかります。問題は、同じ機能を持つ<svg>要素を作成しないことです。

'xmlns'の後続のsetAttributeの呼び出しが間違っていて削除できますが、名前空間は要素作成の副作用であり、setAttributeで事実の後に設定できるものではありません。