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"});

看起来其余部分应该很简单，但我花了最后两个小时尝试所有“明显”的事情来完成这项工作而没有成功。¹

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

_{¹我尝试了很多东西来描述它们。我只需说text 方法，当用作设置器时，会清除textContent 对象之前的text 。这意味着，实际上，这种方法只能被调用一次，这就排除了依赖于第二次调用.text(...)的解决方案来添加“sit amet”片段。）}

Answer 1

通常你会考虑使用html函数，但是来自文档：

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

以下是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');

Answer 2

以下是Snap.svg：

的使用方法

＆＃13;

var paper = Snap("#svg0");
var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 70, ["S","n","a","p"]);

＆＃13;

<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>

＆＃13;

如何使用内联tspan子项追加文本元素？

2 个答案: