SVG.text自動換行

時間 2019-11-25

標籤 svg.text svg text 自動換行欄目 HTML 简体版

原文原文鏈接

一、（20180530）目前查到的資料，說 SVG自身尚未文字自動換行的功能html

二、資料：segmentfault

　　2.一、xml - Auto line-wrapping in SVG text - Stack Overflow.html（https://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text）app

　　2.二、請問SVG text怎麼設置字體大小？怎麼換行？ - LeslieHoward的回答 - SegmentFault 思否.html（https://segmentfault.com/q/1010000008426252/a-1020000008428672）svg

　　2.三、大概相似的代碼爲：測試

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

三、測試（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>