2

I need to wrap text inside a shape. This is the code I found in a reference, but itself is not working. Can anyone help me? 

<svg xmlns:svg="http://www.w3.org/2000/svg" version="1.2"
         xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="600px" height="400px" viewBox="0 0 300 310">
      <title>Basic textflow</title>
      <rect x="0" y="0" width="100%" height="100%" fill="yellow"/>

  <flowRoot font-size="16" fill="black" color="black">
    <flowRegion>
      <path d="M100,50L50,300L250,300L300,50z"/>
        <flowText>Tomorrow, and tomorrow, and tomorrow; creeps in this 
       petty pace from day to day, until the last syllable of recorded time. 
       And all our yesterdays have lighted fools the way to dusty death.
     </flowText>
    </flowRegion>

  </flowRoot>

  <path d="M90,40L40,270L260,270L210,40z" fill="none" stroke="black" stroke-width="5"/>
</svg>

My Requirement: I need my content to be wrapped in the same way (marked with yellow stroke. FYI: At top I used SVG image mask which is working all well.)

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
srikanth_naalla
  • 2,305
  • 2
  • 17
  • 23
  • 1
    That's from the "never completed" SVG 1.2 full draft spec. As far as I know only Inkscape implements it. You'd need to do it in javascript by measuring the text and splitting it yourself. – Robert Longson Aug 30 '14 at 13:29
  • Is there any other way instead of splitting myself? I update my question with exact requirement. Let me know how can come out of this. – srikanth_naalla Aug 30 '14 at 13:40
  • No. SVG does not currently have any auto text layout elements. Otherwise try googling - perhaps there is script out there that someone has made. – Paul LeBeau Aug 30 '14 at 14:24
  • Try this 3 yr old [Example of text split](http://stackoverflow.com/questions/7046986/svg-using-getcomputedtextlength-to-wrap-text). Strange that HTML has auto text-split from the dinosaur days but not SVG. – Alvin K. Aug 31 '14 at 05:26

2 Answers2

1

This is not the answer you want but it is the best I've found. Both FireFox and to lesser extent Chrome support the foreignObject tag. With this you can add text. This generally works well but you are limited to a rectangle for wrapping this way. The xmlns attribute is required.

    <foreignObject  x="225" y="630" width="157" height="125">
     <div class="plain-text"  xmlns="http://www.w3.org/1999/xhtml">
You can put really long lines of text here and they will wrap as you would hope they would. The problem is that Chrome doesn't support <ul><li> tags in side the foreignObject.
     </div>
    </foreignObject>

The desired flow region is just not supported by any browser. Here's a link to Stackoverflow answer that gives more detail.

Auto line-wrapping in SVG text

Community
  • 1
  • 1
Display name
  • 1,228
  • 1
  • 18
  • 29
0

For Chrome version 112.x I needed to namespace prefix the html elements directly as so:

<foreignObject  x="225" y="630" width="157" height="125">
     <xhtml:div>
        Long string here...
    </xhtml:div>
</foreignObject>
Malcolm Swaine
  • 1,929
  • 24
  • 14