【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设置相同的值。

你可能没有注意到的一件事是上面列表中字符之间的长度和间距，这似乎有点错误。如果你测量每个字符的长度，你所期望的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、1800">This is some SVG Text</text>  
</svg>

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

和前面的例子一样，空间也会旋转。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中触摸右边缘。我猜这和每个浏览器如何计算字符之间的间距有关，但我不确定。如果有学生知道，请在评论区分享。

字符自动分隔，因此文本字符串填充空间。除非可以设置宽度，否则就像证明内容一样。

如果你感兴趣，你也可以通过设置一个较小的长度值来折叠字符。

<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>

这通常不是用来展示你想要阅读的文本的，但它可以用来创建一些有趣的效果，而不需要阅读。

你需要注意的一件事是，字符之间的空间是基于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>

拉伸字符，填满整个空间

正如我前面提到的，因为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>在元素中创建<text>将元素渲染成可搜索和选择的文本，so easy。

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