SVG Text 簡介與範例

7 min readJul 7, 2016

因為工作的關係今天讀了一下 SVG Text 1.1 的 Spec，看著看著也順便寫了一些範例可以分享（也把它們放在 CodePen 上），讓有興趣的人可以快速入門。

x 與 y

最簡單的範例就是只有 x, y 屬性的文字，這就不介紹了。

<svg height=”200" width=”300">
 <text x=”50" y=”50">Hello World</text>
</svg>

x, y 陣列

有意思的是 x 跟 y 都可以給一個陣列，如此一來每個字元都可以指定位置。如果陣列沒給足夠的話，接下來每個字元的 y 都會跟前一個字元一樣，x 數值則會依照 kerning 與字元寬度變換（如果是直書就是反過來）。

<svg height=”200" width=”300">
 <text x=”50,60,70" y=”50,60,70">Hello World</text>
</svg>

dx, dy

除了 x, y 以外，也可以用 dx, dy 這個是對於前一個字元的相對位置，就不用每個字元都需要知道絕對座標

<svg height=”200" width=”300">
 <text x=”50" y=”50" dx=”0,10,20">Hello World</text>
</svg>

rotate 旋轉字元

而每個字元也都可以指定旋轉的角度，可以指定一個角度，所有的字元都會套用相同的效果，或是指定多個，這樣每個字元的角度都會不一樣。如果要整個文字元素都旋轉的話可以用 transform 屬性。

<svg height=”200" width=”300">
 <text x=”50" y=”50" rotate=”30">Hello World</text>
</svg><svg height=”200" width=”300">
 <text x=”50" y=”50" rotate=”0,30,60,90,120">Hello World</text>
</svg>

textLength 與 lengthAdjust

一般來說 textLength 都是自動計算，但是如果指定數值後就可以實作類似分散對齊的效果。lengthAdjust=”spacingAndGlyphs” 則是除了字元間的空白會增加外，文字也會變寬。

<svg height=”200" width=”300">
 <text x=”50" y=”50" textLength=”200">Hello World</text>
</svg><svg height=”200" width=”300">
 <text x=”50" y=”50" textLength=”200" lengthAdjust=”spacingAndGlyphs”>Hello World</text>
</svg>

<tspan>

<tspan> 用法跟 HTML 裡面 <span> 的用法類似，不過每個 <tspan> 都可以指定 x, y 或 dx, dy，也可以指定 font-weight。

<svg height="200" width="300">
  <text x="50" y="50">
    <tspan>Hello</tspan>
    <tspan dy="50" font-weight="bold" fill="red">World</tspan>
    <tspan dy="-30">3rd word</tspan>
  </text>
</svg>

直書

直書可以將 writing-mode 指定成 tb (top-to-bottom) 達成，理論上還可以設定其他書寫方式，不過試不太出來，阿拉伯文對我來講有點難辨識，不清楚到底是設定成功還失敗。

<svg height="200" width="300">
  <text writing-mode="tb" x="50" y="50">漢字直行書寫</text>
</svg>

text-anchor

text-anchor 是決定要從哪邊開始繪製。下面三個 <text> 的 x 數值都是一樣，但是畫出未來的位置不同，如果想要把文字畫在正中間這個屬性蠻好用的。綠色線是 x=100 的位置，如果是 start (預設) 就會從 x=100 的右邊開始畫起，如果是 middle 時 x=100 就會對準中間，end 就會是在最後。如果是直書模式 x 則改用 y 代替。

<svg height="200" width="300">
  <text x="100" y="50">Hello World</text>
  <text text-anchor="middle" x="100" y="100">Hello World</text>
  <text text-anchor="end" x="100" y="150">Hello World</text>
</svg>

Text on Path

<textPath> 是一個可以把文字畫在線段上的標籤，如果你想做出個笑臉男的標籤就可以用 <textPath> 完成。

<svg height="200" width="300">
  <defs>
    <path id="MyPath"
       d="M 50 50 
          C 100 150 110 0 290 150" />
  </defs>
  <use xlink:href="#MyPath" fill="none" stroke="red"  />
  <text>
    <textPath xlink:href="#MyPath">
      Hello 中文 World
    </textPath>
  </text>
</svg>