How to implement SVG 1.2 Tiny textArea?

Question

I recently browsed on the internet that there is a textArea local to SVG (I might need this for text-wrapping purpose)

I used the example and tested it on Chrome inside

Answer 1

Check if the UA supports the http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow feature string and display an SVG textArea if it does, otherwise display an html textarea inside a foreignObject e.g.

<switch>
    <g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
        <textArea width="200" height="300">whatever</textArea>
    </g>
    <foreignObject width="200" height="300">
        <textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
    </foreignObject>
</switch>