d3.jsを除いて、プログラムで挿入されたSVG <tspan>要素が描画されないのはなぜですか？

Question

は私がプログラムで、次のSVGで<text>要素に追加<tspan>を挿入したいと言う：

<svg width="300" height="500"> 
    <text x="50" y="100"> 
     <tspan x="50">one</tspan> 
     <tspan x="50" dy="20">two</tspan> 
     <tspan x="50" dy="20">three</tspan> 
    </text> 
</svg> 

これは純粋なJavaScriptの（.appendChild）、jQueryの（.append）、およびD3、とりわけ、で行うことができます.js（.append）。しかし、すべての3つのメソッドが正常に要素を挿入しますが、私はそれがd3.jsによって挿入されますときに実際にを表示にそれを得るように見えることができます：http://jsfiddle.net/2NLJY/：

はこのフィドルで減少した場合を参照してください。

私が試したブラウザでは、Firefox、Chrome、およびSafari（すべてのOS X 10.8）の動作が一貫しています。

ここでは何が起こっていますか？

Answer 1

SVG要素を作成するためにcreateElementを使用することはできません。あなたはSVG要素を作成することができるようにjqueryのに機能を追加しますjquery pluginあり

document.createElementNS("http://www.w3.org/2000/svg", "tspan"); 

書く必要があるので、SVG要素はSVG名前空間に作成する必要があります。