SVG之text

svg裏輸入文本用<text>元素

<text>基本屬性

• x,y

• stroke,fill

• font styles

(x,y)用於指定文字起始位置。準確的說，x指定文字最左側座標位置，y指定文字baseline所處y軸位置。
fill的默認爲black，stroke默認爲none。若是設置了stroke，字的邊緣會再「描一層邊」。若是設置了stroke並將fill設爲none，呈現爲空心字。
css中影響字體樣式的屬性一樣能夠做用在<text>上：font-size, font-weight, font-family, font-style, font-decoration, word-spacing, letter-spacing。

<g id="coordinates" stroke="black" stroke-width="1">
    <path d="M10 0v90m0 -60h200m-200 30h200m-200 30h200"></path>
</g>
<g id="text">
    <text x="10" y="30">First Line</text>
    <text x="10" y="60" stroke="black">Second Line</text>
    <text x="10" y="90" stroke="blue" fill="none" stroke-width=".5">Third Line</text>
</g>

對齊

默認<text>從起始位置(x,y)開始展現。但因爲在svg中沒法事先知道<text>的長度，因此沒法僅經過改變(x,y)讓<text>的中軸或結束位置位於指定位置。
但svg提供了一種更簡單直接的方法實現這些對齊方式。
text-anchor屬性能夠改變(x,y)做爲起始座標的定義。
text-anchor="start"時，(x,y)爲<text>的起始座標。
text-anchor="middle"時，(x,y)爲<text>的中軸座標。
text-anchor="end"時，(x,y)爲<text>的結束座標。

<g style="font-size: 14pt;">
    <path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
    <text x="100" y="30" style="text-anchor: start">Start</text>
    <text x="100" y="60" style="text-anchor: middle">Middle</text>
    <text x="100" y="90" style="text-anchor: end">End</text>
</g>

<tspan>

若是要實如今一整段文字中，讓部分文字呈現出不一樣的樣式，只用<text>是不現實的，在不知道一個<text>在哪兒結束的狀況下，沒法讓另外一個<text>緊接在其後面。
<tspan>容許被嵌入在<text>內部來實現以上場景。
<tspan>除了<text>擁有的屬性外，還有另外兩個屬性

• dx, dy

(dx,dy)能夠將<tspan>內的文字，以其初始位置爲起點(0,0)，偏移(dx,dy)
(x,y)是將<tspan>內的文字定位到其座標系的(x,y)位置。

<g id="coordinates" fill="none" stroke="black" stroke-width="1">
    <path d="M10 0v30h200m-190 0v30h190m-180 0v30h180"></path>
</g>
<g id="text" font-size="2rem">
    <text x="10" y="30">first line
        <tspan x="20" y="60">second line</tspan>
        <tspan x="30" dy="30">third line</tspan>
    </text>
</g>

dx,dy還能夠這麼玩

<text x="30" y="30" font-size="2rem">
    It’s
    <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8"
           rotate="5 10 -5 -20 0 15">shaken</tspan>,
    not stirred.
</text>

"shaken"一共六個字符，dx,dy,rotate分別各有六個數值，空格或逗號隔開，每一個數值對相做用於應次序的字母。rotate能夠對字符作旋轉。
若是dx（或者dy,rotate）參數個數小於<tspan>內的字符個數，最後一個dx(dy,rotate)參數值將做用於多出的字符。

另外，上標下標除了能夠用dy來擡高或下降字符位置，還有一個baseline-shift樣式能夠直接定義上標下標

<text x="20" y="25" style="font-size: 1.5rem;">
    C<tspan style="baseline-shift: sub;font-size: 1rem;">12</tspan>
    H<tspan style="baseline-shift: sub;font-size: 1rem">22</tspan>
    O<tspan style="baseline-shift: sub;font-size: 1rem">11</tspan> (sugar)
</text>
<text x="20" y="70" style="font-size: 1.5rem;">
    6.02 x 10<tspan baseline-shift="super" style="font-size:1rem">23</tspan>
    (Avogadro's number)
</text>

設置text長度及字符間隔

默認狀況下無從得到<text>的長度，但能夠經過textlength屬性設置<text>長度。<text>內部字符會根據textLength自適應變化。經過lengthAdjust屬性來設置字符變化規則。
lengthAdjust有兩個可選屬性值。

• spacing

• spacingAndGlyphs

spacing只調整字符之間的間隔；spacingAndGlyphs則會根據必定比例同時調整字符之間的間隔，以及字符自己寬度。

<g style="font-size: 1.3rem;">
    <path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"></path>
    <text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
    <text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
    <text x="20" y="90">Two words
        <tspan style="font-size: 10pt;">(normal length)</tspan>
    </text>
    <path d="M 20 100 20 170 M 90 100 90 170" style="stroke: gray;"></path>
    <text x="20" y="120" textLength="70" lengthAdjust="spacing">Two words</text>
    <text x="20" y="160" textLength="70" lengthAdjust="spacingAndGlyphs">Two words</text>
</g>

垂直text

有兩種方法實現垂直顯示text。一種使用transform，一種是text特有的writing-mode：tb(top to bottom)樣式。
書上用writing-mode + glyph-orientation-vertical的實現方式在chrome上沒生效。
我的認爲使用transform（或者writing-mode:tb）+ rotate + letter-spacing實現起來更爲靈活。

<text x="50" y="20" style="writing-mode: tb;letter-spacing:5px" rotate="-90" >Writing Vertical Text</text>
<text x="70" y="20" transform="rotate(90, 70, 20)" style="letter-spacing:5px" rotate="-90" >Writing Vertical Text</text>

textPath

內嵌於<text>中的<textpath>元素，經過xlink:href屬性指向一個<path>元素，能夠將其內部字符的baseline設置成指定的path。

<defs>
    <path id="circle" d="M70 20a40 40 0 1 1 -1 0"></path>
</defs>
<text>
    <textPath xlink:href="#circle">
        Text following a circle.............
    </textPath>
</text>

超出<path>長度部分的文字將被隱藏。

默認的，<textPath>的起始位置爲<path>的起始位置。
<textPath>元素還有一個startOffset屬性，能夠調整<text>起始位置。startOffset爲百分數時，<textPath>起始位置 = startOffset * <path>總長度。startOffset爲具體數字時，<textPath>起始位置 = startOffset + <path>的起始位置。
利用startOffset和text-anchor，能夠實現文字居中擺放。

<defs>
    <path id="semi" d="M110 100a50 50 0 1 1 100 0"></path>
</defs>
<use xlink:href="#semi" stroke="grey" fill="none"></use>
<text text-anchor="middle">
    <textPath xlink:href="#semi" startOffset="50%">
        Middle
    </textPath>
</text>

關於空白符

關鍵就說一點，svg沒有換行符！svg默認會把全部單個或連續多個空格、tabs、換行符轉成單個空格。即便在css中將white-space設置爲pre，換行符依然會被轉換成空格！