为什么以编程方式插入未绘制的SVG <tspan>元素，除了d3.js？</tspan>

Question

假设我想以编程方式在以下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）。但是，尽管所有三种方法都成功插入了元素，但是当它被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 plugin可以为jquery添加功能，允许创建svg元素。