如何实现SVG 1.2 Tiny textArea? [英] How to implement SVG 1.2 Tiny textArea?

问题描述

我最近在互联网上浏览了 在SVG本地有一个 textArea (出于包装文本的目的，我可能需要此)

我使用了示例，并在Chrome的HTML5元素内对其进行了测试， 但不会显示textArea元素， 有谁知道如何正确实现SVG textArea? 还是可能不支持SVG 1.2 tiny? (我只使用普通的SVG 1.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>

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)

解决方案

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>

这篇关于如何实现SVG 1.2 Tiny textArea?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！