如何使用SVG Text

Question

如何使用SVG Text

Answer 1

在处理SVG文本时，不要局限于 x 和 y 属性。 <text> 元素还有几个可以添加的属性，现在我们开始讨论吧。
dx 和 dy 属性
我们从 dx 和 dy 属性开始讲，和 x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。
和 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 的值都设置为 0 ，然后 dx 和 dy 设置一列长度值。注意到随着长度值的增长，下一个字符的距离也在增长。如果想要在字符间保持相同的间距，你需要给 dx 和 dy 设置相同的值。
This is some SVG Text
一件你可能没注意到的事是上面列表中字符之间的长度和间距，好像有点不太对。如果你测量了每个字符的长度，你期望中的 i 和 s 之间的间距应该是 60px ，这是最后一个值设置的。
但是它没有这样显示的原因是， 60px 拉开的是从“is”中的 i 到“this”和“is”之间的space[空格] 之间的间距。间隔是按照字符（空格也是字符）来算的。
旋转SVG字符
你还可以使用 rotate 属性来旋转字符，它接受一列值。每个数字又代表一个特定的字符。
<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 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符 T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。