html - 如何实现 SVG 1.2 Tiny textArea？

Question

我最近在互联网上浏览到 SVG 本地有一个textArea（我可能需要这个用于文本换行）

我使用了该示例并在 HTML5 元素内的 Chrome 上对其进行了测试，但它不会显示 textArea 元素，有人知道如何正确实现 SVG textArea 吗？还是可能还不支持 SVG 1.2 tiny？（我只使用通常的 SVG 1.1）

Answer 1

检查 UA 是否支持http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow特征字符串，如果支持则显示 SVG textArea，否则在 foreignObject 中显示 html textarea，例如

<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>