如何 *** 作SVG Text

在处理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 redoverflow: 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 redoverflow: 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 。

SVG互动指的是使用矢量图形格式(SVG)来创建可交互的网页内容。与普通的静态矢量图形相比，SVG互动允许网站开发人员使用JavaScript代码来访问和修改矢量图形元素，这些元素可以比其他方式提供更大的灵活性和创造性。

---