SVG.垂直<text/>

参考网址：https://segmentfault.com/a/1190000009293590

 

ZC：属性rotate 是指 <text/>中的单个字符(文字)的旋转（非整体<text/>的旋转[ 整体旋转是在transform属性中指定的 ]）

ZC：我直接使用 

　　<text x="150" y="20" style="writing-mode:tb; letter-spacing:5px" >中文垂直测试</text>

　　的方式来显示垂直的中文，然而如果显示英文的话，字符需要旋转

ZC：方式一：直接指定 "writing-mode: tb;"使得文字垂直显示，然后看 字符(文字)是否还需要旋转

ZC：方式二：将整个<text/>旋转，然后再旋转 里面的 字符(文字)

ZC：注意 <text/>的位置的变化

 

1、代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg" >

    <text x="50" y="20" style="writing-mode: tb;letter-spacing:5px" rotate="-90" >Writing Vertical Text</text>
    <text x="70" y="20" style="writing-mode: tb;letter-spacing:5px" >Writing Vertical Text</text>
    <text x="90" y="20" transform="rotate(90, 90, 20)" style="letter-spacing:5px" rotate="-90" >Writing Vertical Text</text>

    <text x="150" y="20" style="writing-mode:tb; letter-spacing:5px" >中文垂直测试</text>
    <text x="180" y="20" style="writing-mode:tb; letter-spacing:5px" rotate="-90">中文垂直测试</text>
    <text x="210" y="20" transform="rotate(90, 210,20)" style="letter-spacing:5px" rotate="-90" >中文垂直测试</text>


    <line x1="0" y1="20" x2="800" y2="20" stroke="red" stroke-width="1" />
    
</svg>

 

2、Chrome（版本 51.0.2704.63 m）中显示

 

3、

4、

5、