前言
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中已经被删除。
