在處理SVG文本時(shí)，不要局限于 x 和 y 屬性。 <text> 元素還有幾個(gè)可以添加的屬性，現(xiàn)在我們開始討論吧。
dx 和 dy 屬性
我們從 dx 和 dy 屬性開始講，和 x 和 y 類似，除了它們的值表示的是相對(duì)于前一個(gè)字符的長度，而不是相對(duì)于整個(gè)視窗的絕對(duì)定位。
和 x 、 y 一樣， dx 和 dy 接受一列長度值。
我們還是用上周的示例，然后把值賦給 dx 和 dy 。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text</text>
</svg>

這里我把 x 和 y 的值都設(shè)置為 0 ，然后 dx 和 dy 設(shè)置一列長度值。注意到隨著長度值的增長，下一個(gè)字符的距離也在增長。如果想要在字符間保持相同的間距，你需要給 dx 和 dy 設(shè)置相同的值。
This is some SVG Text
一件你可能沒注意到的事是上面列表中字符之間的長度和間距，好像有點(diǎn)不太對(duì)。如果你測(cè)量了每個(gè)字符的長度，你期望中的 i 和 s 之間的間距應(yīng)該是 60px ，這是最后一個(gè)值設(shè)置的。
但是它沒有這樣顯示的原因是， 60px 拉開的是從“is”中的 i 到“this”和“is”之間的space[空格] 之間的間距。間隔是按照字符（空格也是字符）來算的。
旋轉(zhuǎn)SVG字符
你還可以使用 rotate 屬性來旋轉(zhuǎn)字符，它接受一列值。每個(gè)數(shù)字又代表一個(gè)特定的字符。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>

這里我把 x 設(shè)置為 0 ， y 為 20 ，給 rotate 屬性設(shè)置了一列值。字符 T 旋轉(zhuǎn) 0deg ， H 旋轉(zhuǎn) 45deg ，以此類推。直到這列值結(jié)束，所有剩下的字符都會(huì)保持旋轉(zhuǎn) 0deg 。