6

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

这里发生了什么？

4

1 回答 1

11

您不能使用 createElement 创建 SVG 元素。SVG 元素必须在 SVG 命名空间中创建，因此您需要编写

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

有一个jquery 插件，它为 jquery 添加了允许创建 svg 元素的功能。

于 2013-05-22T21:05:12.573 回答