2

I have text inside svg and I want to have it auto-wrap. I tried the examples from the spec, but its not working in latest versions of Chrome or Firefox.

Any help on how to have a run of text auto-wrap in SVG will be appreciable.

Here is the sample code from example: 


<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="100" viewBox="0 0 300 100">

  <text x="50" y="30" style="font: 20px sans-serif; inline-size: 200px">
    This text wraps at 200 pixels.
  </text>

</svg>

enter image description here

Ravi Tiwari
  • 946
  • 8
  • 17
  • 1
    Possible duplicate of [Auto line-wrapping in SVG text](https://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text) – Hooman Bahreini Sep 09 '19 at 07:30
  • 1
    All the solutions mentioned there are implementing one or the other technique as specified in 1.1 spec [here](https://www.w3.org/TR/SVG11/text.html#Introduction). Do we not have 2 support anywhere now? – Ravi Tiwari Sep 09 '19 at 07:52
  • Sorry, I don't know the answer... I just thought that other question might be helpful. – Hooman Bahreini Sep 09 '19 at 07:53
  • as an alternative solution you may **1** choose to calculate the value for the font-size so that you don't need to wrap. Or: **2** decide where do you need to wrap your text and use a `` element for the second part of the text – enxaneta Sep 09 '19 at 08:04
  • 3
    @RaviTiwari no browser supports that part of SVG 2 yet. – Robert Longson Sep 09 '19 at 08:22
  • You will have to preformat the text by manually dividing it into lines, and then set the css property "white-space" to "pre". – Alpha_Pi Jan 21 '21 at 07:32

0 Answers0