如何实现SVG 1.2 Tiny的textarea功能？

Question

13 浏览2023年6月4日

匿名的 2023年6月4日

0 Comments

最近在互联网上浏览时发现SVG中有一个本地的，可能需要它来实现文字换行的功能。我使用了示例，并在HTML5元素中在Chrome上进行了测试，但是它不会显示<textarea>元素。有人知道如何正确实现SVG中的<textarea>吗？还是说SVG 1.2 Tiny还未得到支持？（我只使用过常规的SVG 1.1）</p> </div> <div class="scisco-sq-comments"> <apcomments id="comments-283094" class="have-comments"></apcomments> </div> </div> <div class="scisco-sq-vote"><div id="vote_283094" class="ap-vote net-vote" ap-vote="{"post_id":283094,"active":"","net":0,"__nonce":"b53b643c26"}"><a class="apicon-thumb-up ap-tip vote-up" href="#" title="投票支持这个帖子" ap="vote_up"></a><span class="net-vote-count" data-view="ap-net-vote" itemprop="upvoteCount" ap="votes_net">0</span><a data-tipposition="bottom center" class="apicon-thumb-down ap-tip vote-down" href="#" title="对此文章投反对票" ap="vote_down"></a></div></div> </div> </div>  </div> <apanswersw style=""> <div id="ap-answers-c"> <div class="ap-sorting-tab clearfix"> <h3 class="ap-answers-label ap-pull-left" ap="answers_count_t"> <span itemprop="answerCount">1</span> 答案 </h3> <ul id="answers-order" class="ap-answers-tab ap-ul-inline clearfix"><li class="active"><a href="https://it.jidaohang.com/question/283094/?order_by=active#answers-order">活跃</a></li><li><a href="https://it.jidaohang.com/question/283094/?order_by=voted#answers-order">已投票</a></li><li><a href="https://it.jidaohang.com/question/283094/?order_by=newest#answers-order">最新</a></li><li><a href="https://it.jidaohang.com/question/283094/?order_by=oldest#answers-order">最老的</a></li></ul> </div> <div id="answers"> <apanswers> <div id="post-403160" class="answer" apid="403160" ap="answer"> <div class="ap-content" itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer"> <div class="scisco-sq"> <div class="scisco-sq-avatar"> <a href="#/user/anonymous/about/"> <img alt='' src='https://it.jidaohang.com/wp-content/uploads/ap_avatars/1b5f8d9f88d6a3b411d5a99a57624280.jpg' srcset='https://it.jidaohang.com/wp-content/uploads/ap_avatars/1b5f8d9f88d6a3b411d5a99a57624280.jpg 2x' class='avatar avatar-50 photo avatar-default' height='50' width='50' decoding='async'/> </a> </div> <div class="scisco-sq-content-wrapper"> <div class="scisco-sq-metas"> <div class="scisco-sq-metas-left"> <span class="ap-author" itemprop="author" itemscope itemtype="http://schema.org/Person"> 匿名的 </span> <time itemprop="datePublished" datetime="2023-06-28T20:33:27+00:00"> Posted 2023年6月28日 </time> <div class="scisco-sq-metas-comment-count"> <i class="fas fa-comment"></i><span itemprop="commentCount">0</span> Comments </div> </div> <div class="scisco-sq-metas-right"> </div> </div> <div class="scisco-sq-content" itemprop="text" ap-content> <p>问题：如何实现SVG 1.2 Tiny的文本区域？</p> <p>原因：我在Chrome和IE上进行了测试，发现没有一个浏览器支持textflow功能字符串。不知道有没有任何浏览器支持这个功能？</p> <p>解决方法：目前只有Opera支持该功能。需要在switch元素内部判断浏览器是否支持textflow功能字符串，如果支持则显示SVG的textArea，否则在foreignObject内部显示html的textarea。此外，还需要为foreignObject元素指定宽度和高度才能使其可见。需要注意的是，IE不支持foreign object。在Chrome中尝试后仍然无法正常工作。</p> <p>以下是实现方法的代码示例：</p> </p> <pre class="brush: xml"><switch> <g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow"> <textArea width="200" height="300">whatever otherwise

需要注意的是，上述代码中的requiredFeatures字符串是正确的，但是w3.org/TR/SVGTiny12/feature.html#specific是更好的参考链接。

希望以上内容能够解决你的问题。

0