前言

svg標(biāo)簽主要用于繪制圖表，難免需要顯示一些文字。svg中自有的文本標(biāo)簽text

text

svg中文字標(biāo)簽 w3標(biāo)準(zhǔn)

x,y絕對坐標(biāo)

dx、dy相對坐標(biāo)，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">
    響應(yīng)率︵%︶
</text>
text{
    font-size: 14px;
    fill: rgb(232, 239, 244);
    text-anchor: middle;
  }

超出部分顯示..., css無法實(shí)現(xiàn)， 需要借助js

特殊樣式

默認(rèn)<text>從起始位置(x,y)開始展示
fill的默認(rèn)為black，stroke默認(rèn)為none
text-anchor="middle"
start|middle|end(起始坐標(biāo)|中軸坐標(biāo)|結(jié)束坐標(biāo))

tspan

分離text， 給text添加絕對和相對坐標(biāo)、樣式。（不推薦使用絕對坐標(biāo)， 此時(shí)可以把text看做一個(gè)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

文本復(fù)用，svg2.0中已經(jīng)被刪除。