svg中文字显示及常用样式设置

前言

svg标签主要用于绘制图表，难免需要显示一些文字。svg中自有的文本标签text

text

svg中文字标签 w3标准

x,y绝对坐标

dx、dy相对坐标，dx="0 15 30 45"

rotate, [0, 360] rotate="0 15 30 45"

textLength文字长度(不常用)

lengthAdjust文字间距(不常用)

<text x="40" y="50">文字显示</text>

竖向排列1

<text x="200" y="0" style="font-size:24px; writing-mode: tb;">垂直文字</text>

竖向排列2，（备注dx,dy取决于font-size: 14px;），

<text class="title" x="20" y="27.5" dx="-14 -14 -14 -14 -14 -14" dy="0 15 15 15 15 15">
    响应率︵%︶
</text>
text{
    font-size: 14px;
    fill: rgb(232, 239, 244);
    text-anchor: middle;
  }

超出部分显示..., css无法实现， 需要借助js

特殊样式

默认<text>从起始位置(x,y)开始展示
fill的默认为black，stroke默认为none
text-anchor="middle"
start|middle|end(起始坐标|中轴坐标|结束坐标)

tspan

分离text， 给text添加绝对和相对坐标、样式。（不推荐使用绝对坐标， 此时可以把text看做一个text分组）

文本分割

<text x="240" y="120"> 
    <tspan>SVG</tspan>
    <tspan>SVG</tspan>
</text>

两行显示

<text x="240" y="120"> 
    <tspan>SVG1</tspan>
    <tspan dy="24">SVG2</tspan>
</text>

textPath

文字排列沿线

<defs>
    <path id="MyPath"
          d="M 100 200 
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>
  <use xlink:href="#MyPath" fill="none" stroke="red"  />
 <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

tref

文本复用，svg2.0中已经被删除。