前端开发者学堂 - fedev.cn

如何操作SVG Text

#译文#SVG#SVG Text
发布于 彦子

上周我们学习了如何使用<text>元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本，也尝试了给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 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。

This is some SVG Text

和前面的实例一样，空格也会被旋转。this和is之间的空格被旋转了180deg，这就是为什么我在rotate这一列值的最后添加了一个0。否则，剩余的字符也都会被旋转180deg，变成颠倒的。

被旋转的是单个字符，而不是整个文本字符串。要旋转整个字符串你需要使用transform。

textLength属性

下一个属性是textLength，接受一个长度值。

textLength属性允许你设置文本的长度为一个指定值，忽略容器的尺寸。

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">  
  <text x="0" y="20" textLength="660">This is some SVG Text</text>  
</svg>

这里我把textLength设置为和视窗相同的宽度，这样文本会从两端拉伸。注意最后一个字符不会碰到右边缘。因为它还是在EM box中。EM box的右边缘碰到了视窗的右边缘。

**注意：**评论中提到，最后一个字符在Firefox和Edge中碰触到右边缘。我猜测这是和每个浏览器如何计算字符之间的间距有关，但是我也不确定。如果有同学知道的话，欢迎评论区分享。

This is some SVG Text

字符被自动分隔开，所以文本字符串填充了空间。就像证明内容一样，除非可以设置宽度。

如果你有兴趣，还可以通过设置一个较小的长度值，把字符都叠一起。

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">  
  <text x="0" y="20" textLength="50">This is some SVG Text</text>  
</svg>
This is some SVG Text

通常这不会用来展示大家要阅读的文本，但是它可以用于创建一些有趣的效果，在文本不需要被阅读的情况下。

有一件你需要注意的事情是，字符之间的空间是根据textLength调整的，但是字符本身保留相同的尺寸（不会变形）。你可以通过针对textElement的属性来改变。

lengthAdjust属性

lengthAdjust属性接受两个值（spacing和spacingAndGlyphs），决定文本是否会被拉伸或压缩。

对于这两个值，spacing是默认值，这就是为什么前面的实例中，字符之间的空格自动调整为需要的长度。还是用前面的实例，只改变lengthAdjust的值。

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">  
  <text x="0" y="20" textLength="660" lengthAdjust="spacingAndGlyphs">This is some SVG Text</text>  
</svg>

字符得到拉伸，填满其整空间

This is some SVG Text

我前面提到了，因为SVG文本是和其他图形元素一样的渲染方式，所以我们可以给它添加描边和填充、图案、渐变。任何你可以给其它SVG元素添加的属性，都可以应用给SVG文本。

如下，这个实例中我把填充改成了蓝色，添加一个红色的描边，并把stroke-width设置为2。

<svg width="660" height="220" style="outline: 1px solid red; overflow: visible; font-size: 5em;">  
  <text x="240" y="120" stroke="red" stroke-width="2" fill="blue">SVG</text>  
</svg>
SVG

和上一篇文章一起，我展示了几个操作文本的方式，还有几个文本相关的元素待学习。今天先到这里。

总结思考

我希望你觉得SVG文本不难学习，在<svg>元素中创建的<text>元素，将其渲染为可搜索和选中的文本,so easy。

通过<text>元素的属性，我们还可以操作SVG文本。

下周我们来讲讲<tspan>元素，它允许你给SVG文本中的某部分添加样式。后面再讲讲如何使用<tref>元素，它允许你重用不同的<svg>元素。

本文根据@Steven Bradley的《How To Manipulate SVG Text》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://vanseodesign.com/web-design/how-to-manipulate-svg-text/。

彦子

在校学生，本科计算机专业。逗比一枚，热爱前端热爱生活，喜欢CSS喜欢JavaScript喜欢SVG，爱玩PS玩AI玩啊逗比的软件。努力向上，厚积薄发。

如需转载，烦请注明出处：https://www.fedev.cn/svg/how-to-manipulate-svg-text.htmlair max 90 essential china