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文字间距(不常用)

文字显示

竖向排列1

垂直文字

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

    响应率︵%︶

text{
    font-size: 14px;
    fill: rgb(232, 239, 244);
    text-anchor: middle;
  }

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

特殊样式

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

tspan

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

文本分割

 
    SVG
    SVG

两行显示

 
    SVG1
    SVG2

textPath

文字排列沿线

    
  
  
 
    
      We go up, then we go down, then up again
    
  

tref

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