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 the HTML5 element, but it won't display the textArea element, anyone know how to properly implement the SVG textArea? or is it possible that the SVG 1.2 tiny is not supported yet? (I only worked with the usual SVG 1.1)

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>