svg 文字

<text>標籤

在svg中用使用<text>標籤去定義一段文字。如 Example 1

在svg中寫下

在平坦的路上曲折前行

Example 1 Dome

<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>均可以有不一樣的定位和文本格式。

Example 2 Dome

<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

Example 4 Dome

<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 來設置錯落的文字
讓咱們感覺下：

Example 5 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 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

Example 7 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 textLength="400" >在平坦的路上曲折前行</tspan> 
    </text>

</svg>

還有個屬性配合textLength使用----lengthAdjust
lengthAdjust 有兩個值spacing （默認）和 spacingAndGlyphs當設置成spacingAndGlyphs的時候，會拉伸字母，知道適合充滿textLength 不太好理解，看下實例就懂了。

Example 7 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="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>(會在大漠以後相關文章中介紹)。定義好路徑後，文字就能夠跟着定義的路徑跑了。

Example 8 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">
    <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 不但能指定路徑，還能指定一段文字。如例子：

Example 9 Dome