1

I have an SVG that outputs strings from an Array...

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

the above is output within an SVG as...

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

I want to wrap this over 2 lines however, as so...

This is an example 
of my string...

Is this possible?

Markup

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;
        });
Liam
  • 9,725
  • 39
  • 111
  • 209

2 Answers2

2

SVG has no ability to wrap text. At least not currently...

If you are in a browser environment, you can embed HTML in your SVG using a <foreignObject> element. See Auto line-wrapping in SVG text But you won't be able to use that solution if you need to export the SVG.

Otherwise, if you need to stick to pure SVG, you would need to wrap the lines yourself by splitting in an appropriate place and using two or more <text> or <tspan> elements.

Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
-2

Try to add "\n" into the Array string:

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