<text>標簽
在svg中用使用<text>標簽去定義一段文字。如 Example 1
在svg中寫下
在平坦的路上曲折前行
<svg height="30" width="200">
<text x="0" y="15" fill="red">在平坦的路上曲折前行</text>
</svg>
在例子1中 x="0" y="15" 是文字定位坐標
可能你會有疑問，為什么文字沒有距離上邊是15呢？這里首先你需要了解個概念baseline 熟悉css的同學會眼熟 會用到 vertical-align: baseline; 但是什么是 baseline呢？
這不是我們的重點了解移步到《CSS Baseline: The Good, The Bad And The Ugly》 譯文：《CSS基線之道》
在svg中xy 的坐標就是 基於baseline 如圖：
所以就看不到預想的文字沒有距上邊15px。
<tspan>標簽
你也可以把<text>標簽 設定為文本組，其中可以包含<tspan>，而且每個<tspan>都可以有不同的定位和文本格式。
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text>
</svg>
如果沒有設置tspan 的 x y 那么文本會類似 css 中行內展示
svg中的文字連接
你可以把文字設置成鏈接
Example 3 Dome
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG!</text>
</a>
</svg>
這里注意下，按照html的習慣直接在a 標簽里寫文字是不可以的，文字不會顯示，這里文字是個文本對象，你要設置這個對象的鏈接。
transform
到現在svg中的文字標簽能滿足常規的需要，看似簡單，其實不然——“大有可為”！～
比如讓文字旋轉下Example 4
<svg height="60" width="200">
<text x="0" y="15" fill="red"
transform="rotate(30 20,40)">在平坦的路上曲折前行</text>
</svg>
transform="rotate(30 20,40)" 表示在 （20.40）位置順時針旋轉30度
dx dy
svg 中雖然沒有提供排版的相關支持，但是你可以 通過 dx dy 來設置錯落的文字
讓我們感受下：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="300" viewBox="0,0,400,300">
<text x="10" y="20">
<tspan dx="0 5 10 15 20">12345</tspan>
</text>
<text x="10" y="65">
<tspan dy="0 5 10 15 20">12345</tspan>
</text>
<text x="10" y="150">
<tspan dx="0 5 10 15 20" dy="0 5 10 15 20">12345</tspan>
</text>
<text x="10" y="215">
<tspan dx="0 5 10 15 20" dy="0 5 10 15 20">我愛你中國</tspan>
</text>
</svg>
rotate
rotate 文字的旋轉屬性，rotate可以是個數值列表分別作用於對應的字母，如下面例子
Example 6 Dome
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="300" viewBox="0,0,400,300">
<text x="10" y="20">
<tspan rotate="0 5 10 15 25">在平坦的路上曲折前行</tspan>
</text>
</svg>
還是得把baseline拿出來，旋轉的單位是度，因為我們的習慣是屏幕定位，所以旋轉是沿着y軸順時針旋轉。旋轉基於每個字母的基線和字母左邊。在例子中，文字（字母）是多於rotate的，這時候按照rotate list 的最后一個規則定義多出的字母。
textLength
textLength不好理解，不是文字的長度的意思，指定文字以 textLength 的 SVG viewer去兩端對齊排這些文字類似 css text-align:justify
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="300" viewBox="0,0,400,300">
<text x="10" y="20">
<tspan textLength="400" >在平坦的路上曲折前行</tspan>
</text>
</svg>
還有個屬性配合textLength使用----lengthAdjust
lengthAdjust 有兩個值spacing （默認）和 spacingAndGlyphs當設置成spacingAndGlyphs的時候，會拉伸字母，知道適合充滿textLength 不太好理解，看下實例就懂了。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="300" viewBox="0,0,400,300">
<text x="0" y="20">
<tspan
textLength="400"
lengthAdjust="spacing"
>在平坦的路上曲折前行</tspan>
</text>
<text x="0" y="80">
<tspan
textLength="400"
lengthAdjust="spacingAndGlyphs"
>在平坦的路上曲折前行</tspan>
</text>
</svg>
<path>的使用
<path>標簽的使用：
使用過Illustrator的朋友都知道，我們可以讓文字跟隨路徑，做出各種形狀的文字。我們需要用<defs>來定義<path>(會在大漠之后相關文章中介紹)。定義好路徑后，文字就可以跟着定義的路徑跑了。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="300" viewBox="0,0,400,300">
<defs>
<path id="a1"
d="M0 50 C150 150 100 -50 300 50"
stroke="#000" fill="none"/>
</defs>
<text>
<textPath xlink:href="#a1">在平坦的路上曲折前行</textPath>
</text>
<text dy="30">
<textPath startOffset="30%" xlink:href="#a1">在平坦的路上曲折前行</textPath>
</text>
</svg>
xlink:href 來指定<path> startOffset 來指定在路徑上的起始位置。
這里xlink:href 不但能指定路徑，還能指定一段文字。如例子：