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 テキストエリアを表示します。

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