SVG文本

字符、字形和字體

• 字符（characters）：要展示的字母的數字表示形式，每個字符都由特定的unicode定義。
  • A：01000001
  • a：0110000
• 字形（Glyphs）：字符的可視化表示形式，即顯示出來的單個字
• 字體（Fonts）：字形的集合

字形和字體表被稱爲字體數據。

EM框

• Ascent：從字體的(0,0)點到EM框頂部的距離
• Descent：從字體的(0,0)點到EM框頂部的距離
• Baseline table：設計空間座標系統中的基線的位置。

text元素

在一個SVG文檔中，<text>元素內部可以放任何的文字，例如：<text>Hello World</text>

字體的屬性如同CSS，例如：font-family、font-style、font-weight、font-size等等。

與CSS不同的地方在於，這些屬性直接寫在<text>標籤內。例如：<text font-size="13px">Hello World</text>。

注意在爲<text>設置字體屬性時可以加上單位。

文本的位置

x=“0” y=“0”

<svg width="200" height="50" style="outline: 1px solid red; overflow:auto; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text>http://www.imooc.com</text>
</svg>

x=“x1 x2 x4 x5… xn” y=“x1 y2 y4 y5… yn”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text x="10 20 30 40 50 60 70 80 90 100" y="10 20 30 40 50 60 50 40 30 20 10">Hello World</text>
</svg>

可以按如上方法爲<text>標籤的x、y屬性設置多個值，那麼每一個值都是對字符串中的對應字符設置位置。

如果是設置的值得個數與字符串長度不匹配會怎樣呢？例如：

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text x="10 20 30 40 50 60 70 80 90 100" y="10 20 30 40 50 60 50 ">Hello World</text>
</svg>

可以看出在屬性y的值的個數與字符串長度不符時，其餘未被顯式設置位置的字符都會繼承最後一個被設置位置的字符的y屬性。

若是屬性x的值的個數與字符串長度不符時，未被設置位置的字符則是正常的跟在最後一個被設置位置的字符後。

文本的偏移

dx=“dx” dy=“dy”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dx="10" dy="10">Hello World</text>
</svg>

dx=“x1 x2 x3…xn” dy=“y1 y2 y3 y4…yn”

與x、y屬性一樣，dx、dy一樣可以設置多個值

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy="10 10 10 10 10 0 -10 -10 -10 -10 -10">Hello World</text>
</svg>

文本的旋轉

rotate=“deg”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' rotate="45">Hello World</text>
</svg>

rotate=“deg1 deg2 deg3…degn”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' rotate="45 90 135">Hello World</text>
</svg>

文本的長度

textLength=“widthValue”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' textLength="200">Hello World</text>
</svg>

可以看出通過設置textLength把字符串長度強行拉伸到了200px寬。

在這個例子中，字符串的顯示似乎佔滿了寬度。然而，我們爲字符串多添加一個字符，結果就會是另一個樣子：

這樣看起來似乎又沒有佔滿寬度。這是爲什麼呢？

原因在於前面提到的EM框，字體是放在一個個EM框中的，實際上是EM框的寬度被拉伸至剛好平鋪寬度。

tspan元素

用來標記大塊文本的子部分，它必須是一個text元素或別的tspan元素的子元素。例如：

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text dy='10' textLength="200">Hello <tspan fill="red">World！</tspan></text>
</svg>