5

从已经包含类似内容的 DOM 开始

<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

...我想以编程方式修改元素，d3.select("#svg0")以便最终得到

<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="20" y="20">
Lorem ipsum 
<tspan style="alignment-baseline:text-before-edge">dolor</tspan>
sit amet</text>
</svg>

这是我能得到的：

var $svg = d3.select("#svg0");
$svg.append("text").text("Lorem ipsum ")
                   .attr({x:"20", y:"20"});

看起来其余的应该很容易，但我在过去的两个小时里尝试了所有“明显”的事情来完成这项工作，但没有成功。1

完成上述任务需要做什么？

1我尝试了太多东西来描述它们。可以说，当用作 setter 时，该text 方法会清除对象之前textContent的所有内容。这意味着，有效地，此方法只能调用一次，这排除了依赖于第二次调用来添加“sit amet”片段的解决方案。）text .text(...)

4

2 回答 2

9

通常您会考虑为此使用该html功能，但来自文档：

注意：顾名思义， selection.html 仅支持 HTML 元素。SVG 元素和其他非 HTML 元素不支持 innerHTML 属性，因此与 selection.html 不兼容。考虑使用XMLSerializer将 DOM 子树转换为文本。另请参阅innersvg polyfill，它提供了一个 shim 来支持 SVG 元素上的 innerHTML 属性。

这是polyfill：http: //jsfiddle.net/GNGF5/

如果你不想这样做，你可以使用多个tspan元素 w/ a来破解它transform，如下所示：http: //jsfiddle.net/cAuCM/

var $svg = d3.select("#svg0");
var $text = $svg.append("text");
var $tspan1 = $text.append('tspan');
var $tspan2 = $text.append('tspan');
var $tspan3 = $text.append('tspan');

$text.attr('transform', 'translate(0, 18)');
$tspan1.text('Lorem ipsum');
$tspan2.text('dolor').style('alignment-baseline', 'text-before-edge');
$tspan3.text('sit amet');
于 2013-10-07T02:55:19.647 回答
2

以下是使用Snap.svg的方法：

var paper = Snap("#svg0");
var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 70, ["S","n","a","p"]);
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="svg0" width="600" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

于 2015-06-17T00:52:01.813 回答