如何使用SVG Text

在处理SVG文本时，不要局限于 x和 y 属性。  元素还有几个可以添加的属性，现在我们开始讨论吧。

dx 和 dy 属性

我们从 dx 和 dy 属性开始讲，和x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。

和 x 、 y 一样， dx 和 dy 接受一列长度值。

我们还是用上周的示例，然后把值赋给 dx 和 dy 。



这里我把 x 和 y 的值都设置为 0，然后 dx 和 dy 设置一列长度值。注意到随着长度值的增长，下一个字符的距离也在增长。如果想要在字符间保持相同的间距，你需要给 dx 和dy 设置相同的值。

This is some SVG Text

一件你可能没注意到的事是上面列表中字符之间的长度和间距，好像有点不太对。如果你测量了每个字符的长度，你期望中的 i 和 s 之间的间距应该是 60px ，这是最后一个值设置的。

但是它没有这样显示的原因是，60px 拉开的是从“is”中的 i到“this”和“is”之间的 space[空格] 之间的间距。间隔是按照字符（空格也是字符）来算的。

旋转SVG字符

你还可以使用 rotate 属性来旋转字符，它接受一列值。每个数字又代表一个特定的字符。



这里我把 x 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。