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

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) 来完成。然而，虽然这三种方法都成功插入了元素，但我似乎只能在它被 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 元素的功能。