SVG.text自動換行


1、(20180530)目前查到的資料,說 SVG自身 還沒有 文字自動換行的功能

2、資料:

  2.1、xml - Auto line-wrapping in SVG text - Stack Overflow.html(https://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text

  2.2、請問SVG text怎么設置字體大小?怎么換行? - LeslieHoward的回答 - SegmentFault 思否.html(https://segmentfault.com/q/1010000008426252/a-1020000008428672

  2.3、大概類似的代碼為:

<svg xmlns="http://www.w3.org/2000/svg" style="outline: 1px solid red;margin: 50px;">
    <switch>
        <foreignObject x="20" y="0" width="150" height="200" style="outline: 1px solid blue;">
            <p xmlns="http://www.w3.org/1999/xhtml">Text goes here, Text goes here, Text goes here, Text goes here</p>
        </foreignObject>
                
        <text x="20" y="20">Your SVG viewer cannot display html.</text>
    </switch>
</svg>

 

3、測試(20180619)

<switch>
    <foreignObject x="0" y="0" width="1500" height="2000" style="outline: 1px solid blue;">
        <p xmlns="http://www.w3.org/1999/xhtml">Text goes here, Text goes here, Text goes here, Text goes here.東<br/><br/><br/><br/><br/><br/>04</p>
        <font xmlns="http://www.w3.org/1999/xhtml" face="黑體" color="red"><br/><br/><br/><br/><br/><br/>04</font>
        <html xmlns="http://www.w3.org/1999/xhtml"><br/><br/><br/><br/><br/><br/>04</html>
東
怡
變
04
    </foreignObject>
    
    <text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

  ZC:(1)、文字外面不加 <p/>或<font/>或<html/>等等 的話,沒有辦法識別<br/>(直接用 回車 也不行)

  ZC:(2)、<p/>、<font/>、<html/> 的屬性“xmlns="http://www.w3.org/1999/xhtml"” 是必須的,如果沒有 則文字是看不見的

4、

5、

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM