CODEWITHSUNDEEP
svgword-wrap
srikanth_naalla
srikanth_naalla

Reputation: 2385

Text Wrap inside SVG Shape

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.)

Upvotes: 4

Views: 9481

Answers (2)

Malcolm Swaine
Malcolm Swaine

Reputation: 2258

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>

Upvotes: 0

Display name
Display name

Reputation: 1542

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

Upvotes: 1

Related Questions