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>元素在SVG中嵌入HTML。请参阅Auto line-wrapping in SVG text但如果您需要导出SVG，则无法使用该解决方案。

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

Answer 2

尝试将“\ n”添加到数组字符串中：

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

包裹2行以上的字符串 - SVG

2 个答案: