javascript - 将字符串换行超过 2 行 - SVG

Question

我有一个从数组输出字符串的 SVG...

{"label":"This is an example of my string...",  "value":4},

以上是 SVG 中的输出...

<text>This is an example of my string...<text>

不过，我想把它包装成 2 行，这样...

This is an example 
of my string...

这可能吗？

---

标记

arcs.append("text").attr("transform", function(d){
            d.innerRadius = 0;
            d.outerRadius = r;
            d.angle = (d.startAngle + d.endAngle)/2;
            return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
        })
        .attr("text-anchor", "end")
        .text( function(d, i) {
            return data[i].label;
        });

Answer 1

SVG 无法换行文本。至少目前不是……

如果您在浏览器环境中，您可以使用 <foreignObject> 将 HTML 嵌入到您的 SVG 中元素。参见 Auto line-wrapping in SVG text但是如果您需要导出 SVG，您将无法使用该解决方案。

否则，如果您需要坚持使用纯 SVG，则需要通过在适当的位置拆分并使用两个或更多 <text> 来自行换行。或 <tspan>元素。