Почему программно вставленные элементы SVG <tspan> не отображаются, кроме как с помощью d3.js?

Question

Скажем, я хочу программно вставить дополнительный <tspan> в <text> элемент в следующем 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>

Это может быть сделано, среди прочего, с помощью чистого JavaScript (.appendChild), jQuery (.append) и d3.js (.append). Однако, хотя все три метода успешно вставляют элемент, мне кажется, что он может отображаться только тогда, когда он вставлен d3.js:

См. Уменьшенный регистр в этой скрипке: http://jsfiddle.net/2NLJY/.

Поведение одинаково во всех протестированных браузерах: Firefox, Chrome и Safari (все OS X 10.8).

Что здесь происходит?

Answer 1

Вы не можете использовать createElement для создания SVG-элементов. Элементы SVG должны быть созданы в пространстве имен SVG, поэтому вам нужно написать

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

Существует плагин jquery, который добавляет функциональность в jquery, позволяя создавать элементы svg.