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

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插件,可以为jquery添加功能,允许创建svg元素.