該部分為四個主要部分：
1. <text>和<tspan>標簽詳解
2. 文本水平垂直居中問題
3. <textpath>讓文本在指定路徑上排列
4. <a>插入超鏈接
<text>和<tspan>標簽
<text>和<tspan>標簽是定義文本的基本標簽。
<text>
| 參數 | 描述 | 默認值 |
| x | 文本繪制x軸位置 | 0 |
| y | 文本繪制y軸位置 | 0 |
| dx | 每個字符相對前一個字符的偏移距離 | 0 |
| dy | 每個字符相對前一個字符的偏移距離 | 0 |
例子：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="100" y="100" dx="20 40 60 80 100" fill="black" style="font-size:40px;">我是中國人</text> <path d="M100,0 V200 M0,100 H200" stroke="red"/> </svg>
效果：
PS：文字並不是完全在左下角位置，而是在一個叫基線（baseline）的位置，所以文字會在哪個位置，還得看該字體的基線（關於基線的定義請自身查閱資料）。
<tspan>
<tspan>標簽是用在<text>標簽里面的，也可嵌套使用。所有text標簽可用的屬性，tspan也都可以用。
例子：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="100" y="100" dy="100" fill="black" style="font-size:40px;"> <tspan fill="blue" dy="-20 10">我是</tspan><tspan fill="red">中國人</tspan> </text> <path d="M100,0 V200 M0,100 H200" stroke="red"/> </svg>
效果：
注意：
1. 兩個標簽不支持自動換行。
2. 可以用style屬性設置樣式（基本支持大部分CSS屬性）。
3. 可以通過程序計算dx、dy值來得到各自文字排版（像波浪形或一些函數曲線）。
4. text和tspan標簽設置的dx、dy屬性是會往下傳遞的。也就是在沒有設置情況下，后面字符會用沿用上一個字符的dx、dy值。
5. 如果tspan設置了dx、dy屬性，就會覆蓋text標簽上的dx、dy值，而不是疊加計算。
文本水平垂直居中
水平排列
text-anchor屬性可設置文本水平排列，有三個取值 start | middle | end。
例子：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">我是中國人</text> <text x="200" y="100" text-anchor="middle" fill="black" style="font-size:40px;">我是中國人</text> <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">我是中國人</text> <path d="M200,0 V200 M0,100 H400" stroke="red"/> </svg>
效果：
垂直排列
dominant-baseline屬性可設置文本垂直排列 。
PS：屬性很多，請查看：http://www.w3.org/TR/SVG/text.html#DominantBaselineProperty
例子：
講師已經將該屬性示例演示出來：http://jsbin.com/lekob/5/edit
注意：
可以從效果上看，這個屬性還沒有真正做到垂直居中。
還有另一個做法，就是算出垂直居中的y值，進而模擬垂直居中效果。
講師已經將模擬的代碼演示出來：http://output.jsbin.com/kemaxe
<textpath>標簽
<textpath>可以讓文本在指定路徑上排列 。
例子：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/> <text style="font-size:20px;"> <textPath xlink:href="#p1">落紅不是無情物，一枝紅杏出牆來，恰似一江清水向東流。</textPath> </text> </svg>
效果：
PS：超出Path的部分，瀏覽器不進行渲染。
渲染原理
如下圖：
1. 瀏覽器會算出第一個字符的寬度。
2. 結合路徑的起點得到另一個點。
3. 取得中間的那個點做一條的切線和法線。
4. 然后將該字符放到這個位置上。
5. 將上一個字符最后一個點作為下一個字符的起點。
6. 循環第1步，直到文本渲染完畢。
文本在路徑上的偏移
文本在路徑上的偏移可以用定位屬性 x, y, dx, dy，text-anchor 和 startOffset 屬性 。
從上圖可得到結論：
1. x/dx/startOffset可以設置字符在路徑上的渲染起點。
2. y屬性設置是沒有任何效果的。
3. dy可設置字符在法線上的偏移。
4. text-anchor是設置文本水平排列效果。
<a>標簽
<a>標簽可以添加到任意的圖形上 。
| 屬性 | 描述 |
| xlink:href | 指定鏈接地址 |
| xlink:title | 指定鏈接提示 |
| target | 指定打開目標 |
例子：
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <a xlink:title="百度" xlink:href="https://www.baidu.com" target="_blank"> <rect x="50" y ="50" width="200" height="200" fill="red"/> </a> </svg>
參考視頻
1. SVG課程（慕課網）
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。