上周我们学习了如何使用<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,180,0">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文本。
网友评论文明上网理性发言 已有0人参与
发表评论: