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

Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?

本文关键字：绘制 元素 除了 js d3 编程 方式 插入 SVG 为什么      更新时间：2023-09-26

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

这是怎么回事?

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

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

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

相关文章：