Dlaczego nie zostały narysowane programowo elementy SVG <tspan>, z wyjątkiem d3.js?

Question

że chcę programowo wstawić dodatkowy <tspan> w elemencie <text> w poniższej SVG:

<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> 

To można zrobić z, między innymi, czysty JavaScript (.appendChild), jQuery (.append) i d3 .js (.append). Jednak, chociaż wszystkie trzy metody z powodzeniem wstawić element, mogę tylko wydają się dostać do faktycznie wyświetlić gdy jest włożona przez d3.js:

Zobacz zmniejszoną sprawę w tym skrzypce: http://jsfiddle.net/2NLJY/.

Zachowanie jest spójne w testowanych przeglądarkach: Firefox, Chrome i Safari (wszystkie OS X 10.8).

Co się tutaj dzieje?

Answer 1

Nie można użyć createElement do tworzenia elementów SVG. SVG elementy muszą być tworzone w przestrzeni nazw SVG więc trzeba napisać

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

Jest jquery plugin która podnosi funkcjonalność jQuery pozwalając elementy SVG ma zostać utworzony.