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)

I already saved that as a last resort, but it would be more efficient if I use the element from svg instead of foreignObject inside the svg — Eldon Lesley, Jan 03 '13 at 14:15
Here's a similar question: http://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text — Erik Dahlström, Jan 04 '13 at 08:43

Robert Longson · Answer 1 · 2013-01-04T13:52:43.090

13

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>

edited Jan 04 '13 at 13:52

answered Jan 03 '13 at 14:39

Robert Longson

118,664
26
252
242

I tested it on Chrome and IE and none support the textflow feature string, do you know if any browser feature it? – Eldon Lesley Jan 03 '13 at 14:54
1

Only Opera at the moment AFAIK. – Robert Longson Jan 03 '13 at 14:57
2

The requiredFeatures string is correct, but http://www.w3.org/TR/SVGTiny12/feature.html#specific is a better reference. – Erik Dahlström Jan 04 '13 at 08:39
4

Note: you also need to specify width and height on the foreignObject element for it to be visible. – Erik Dahlström Jan 04 '13 at 09:42
Note: IE doesn't support foreign object. – Stefan Steiger Dec 02 '16 at 08:41
1

Just tried this in Chrome, and it still doesn't work. – posfan12 May 24 '18 at 21:20

How to implement SVG 1.2 Tiny textArea?

1 Answers1

Linked