Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here's an alternative:</p> <pre><code>&lt;svg ...&gt; &lt;switch&gt; &lt;g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow"&gt; &lt;textArea width="200" height="auto"&gt; Text goes here &lt;/textArea&gt; &lt;/g&gt; &lt;foreignObject width="200" height="200" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"&gt; &lt;p xmlns="http://www.w3.org/1999/xhtml"&gt;Text goes here&lt;/p&gt; &lt;/foreignObject&gt; &lt;text x="20" y="20"&gt;No automatic linewrapping.&lt;/text&gt; &lt;/switch&gt; &lt;/svg&gt; </code></pre> <p>Noting that even though foreignObject may be reported as being supported with that featurestring, there's no guarantee that HTML can be displayed because that's not required by the SVG 1.1 specification. There is no featurestring for html-in-foreignobject support at the moment. However, it is still supported in many browsers, so it's likely to become required in the future, perhaps with a corresponding featurestring.</p> <p>Note that the <a href="http://www.w3.org/TR/SVGTiny12/text.html#TextInAnArea" rel="nofollow noreferrer">'textArea' element</a> in SVG Tiny 1.2 supports all the standard svg features, e.g advanced filling etc, and that you can specify either of width or height as auto, meaning that the text can flow freely in that direction. ForeignObject acts as clipping viewport.</p> <p><strong>Note:</strong> while the above example is valid SVG 1.1 content, in SVG 2 the 'requiredFeatures' attribute has been removed, which means the 'switch' element will try to render the first 'g' element regardless of having support for SVG 1.2 'textArea' elements. See <a href="https://svgwg.org/svg2-draft/struct.html#SwitchElement" rel="nofollow noreferrer">SVG2 switch element spec</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload