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

Question

从已经包含类似内容的 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我尝试了太多东西来描述它们。我只想说 text方法，当用作 setter 时，会清除任何 textContent text对象之前。这意味着，实际上，此方法只能调用一次，这排除了依赖于调用 .text(...) 的解决方案。第二次添加“sit amet”片段。)

Answer 1

通常你会认为使用 html为此功能，但来自文档:

Note: as its name suggests, selection.html is only supported on HTML elements. SVG elements and other non-HTML elements do not support the innerHTML property, and thus are incompatible with selection.html. Consider using XMLSerializer to convert a DOM subtree to text. See also the innersvg polyfill, which provides a shim to support the innerHTML property on SVG elements.

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

如果你不想这样做，你可以使用多个 tspan 来破解它。带有 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');