次の SVG<tspan>の要素にプログラムで追加を挿入したいとします。<text>
<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)) で一貫しています。
ここで何が起こっているのですか？