Svg 如何附加带有内联tspan子元素的文本元素？

从已经包含以下内容的DOM开始

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

</svg>

这是我所能做到的：

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

看起来剩下的事情应该很容易，但我已经花了两个小时尝试了所有“显而易见”的事情来完成这件事，但没有成功。1

完成上述任务需要做什么

---

1我尝试了太多的东西来描述它们。只要说

text

方法用作setter时，就可以清除

textContent

对象以前拥有的任何

text

对象。这意味着，有效地，此方法只能调用一次，这排除了依赖于第二次调用

.text（…）

来添加“sit amet”片段的解决方案。

通常您会认为使用

html

函数来实现此目的，但从文档中：

注意：顾名思义，selection.html仅在html上受支持 元素。SVG元素和其他非HTML元素不支持 innerHTML属性，因此与selection.html不兼容。 考虑使用DOM子树转换为文本。看见 还有，它提供了一个垫片来支撑 SVG元素的innerHTML属性

以下是polyfill的示例：

如果您不想这样做，可以使用多个

tspan

元素w/a

transform

，如下所示：

以下是如何使用：

var paper=Snap（#svg0”）；
var t1=纸张文本（50，50，“快照”）；
var t2=纸张文本（50,70，[“S”，“n”，“a”，“p”）
前面提到的问题是使用d3.select，因此Snap.svg的答案与要求的不一样。
var $svg = d3.select("#svg0");
$svg.append("text").text("Lorem ipsum ")
                   .attr({x:"20", y:"20"});

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');