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、

 

posted @ 2018-05-30 16:03  Html5Skill  阅读(8221)  评论(1)  编辑  收藏  举报