滨江区高端网站建设,优化推广方案,wordpress 列表 展开收缩,页面设计参考上周我们学习了如何使用元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本#xff0c;也尝试了给SVG文本中的每个字符定位。关于元素还有很多内容。在处理SVG文本时#xff0c;不要局限于x和y属性。元素还有几个可以添加的属性#xff0c;现在我们开始讨论吧。dx和dy属…上周我们学习了如何使用元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本也尝试了给SVG文本中的每个字符定位。关于元素还有很多内容。在处理SVG文本时不要局限于x和y属性。元素还有几个可以添加的属性现在我们开始讨论吧。dx和dy属性我们从dx和dy属性开始讲和x和y类似除了它们的值表示的是相对于前一个字符的长度而不是相对于整个视窗的绝对定位。和x、y一样dx和dy接受一列长度值。我们还是用上周的示例然后把值赋给dx和dy。This is some SVG Text这里我把x和y的值都设置为0然后dx和dy设置一列长度值。注意到随着长度值的增长下一个字符的距离也在增长。如果想要在字符间保持相同的间距你需要给dx和dy设置相同的值。This is some SVG Text一件你可能没注意到的事是上面列表中字符之间的长度和间距好像有点不太对。如果你测量了每个字符的长度你期望中的i和s之间的间距应该是60px这是最后一个值设置的。但是它没有这样显示的原因是60px拉开的是从“is”中的i到“this”和“is”之间的space[空格]之间的间距。间隔是按照字符(空格也是字符)来算的。旋转SVG字符你还可以使用rotate属性来旋转字符它接受一列值。每个数字又代表一个特定的字符。This is some SVG Text这里我把x设置为0y为20给rotate属性设置了一列值。字符T旋转0degH旋转45deg以此类推。直到这列值结束所有剩下的字符都会保持旋转0deg。This is some SVG Text和前面的实例一样空格也会被旋转。this和is之间的空格被旋转了180deg这就是为什么我在rotate这一列值的最后添加了一个0。否则剩余的字符也都会被旋转180deg变成颠倒的。被旋转的是单个字符而不是整个文本字符串。要旋转整个字符串你需要使用transform。textLength属性下一个属性是textLength接受一个长度值。textLength属性允许你设置文本的长度为一个指定值忽略容器的尺寸。This is some SVG Text这里我把textLength设置为和视窗相同的宽度这样文本会从两端拉伸。注意最后一个字符不会碰到右边缘。因为它还是在EM box中。EM box的右边缘碰到了视窗的右边缘。注意评论中提到最后一个字符在Firefox和Edge中碰触到右边缘。我猜测这是和每个浏览器如何计算字符之间的间距有关但是我也不确定。如果有同学知道的话欢迎评论区分享。This is some SVG Text字符被自动分隔开所以文本字符串填充了空间。就像证明内容一样除非可以设置宽度。如果你有兴趣还可以通过设置一个较小的长度值把字符都叠一起。This is some SVG TextThis is some SVG Text通常这不会用来展示大家要阅读的文本但是它可以用于创建一些有趣的效果在文本不需要被阅读的情况下。有一件你需要注意的事情是字符之间的空间是根据textLength调整的但是字符本身保留相同的尺寸(不会变形)。你可以通过针对textElement的属性来改变。lengthAdjust属性lengthAdjust属性接受两个值(spacing和spacingAndGlyphs)决定文本是否会被拉伸或压缩。对于这两个值spacing是默认值这就是为什么前面的实例中字符之间的空格自动调整为需要的长度。还是用前面的实例只改变lengthAdjust的值。This is some SVG Text字符得到拉伸填满其整空间This is some SVG Text我前面提到了因为SVG文本是和其他图形元素一样的渲染方式所以我们可以给它添加描边和填充、图案、渐变。任何你可以给其它SVG元素添加的属性都可以应用给SVG文本。如下这个实例中我把填充改成了蓝色添加一个红色的描边并把stroke-width设置为2。SVGSVG和上一篇文章一起我展示了几个操作文本的方式还有几个文本相关的元素待学习。今天先到这里。总结我希望你觉得SVG文本不难学习在元素中创建的元素将其渲染为可搜索和选中的文本,so easy。通过元素的属性我们还可以操作SVG文本。