Text Wrap inside SVG Shape

Question

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:

Answer 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