小编ser*_*alp的帖子

假设我想以编程方式在以下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).

这里发生了什么？