上一篇文章中我们介绍了如何绘制SVG文本,那么如何绘制多行文本呢?SVG
的元素用于绘制SVG多行文本。我们不必每行文本都使用绝对定位来排列制作多行文本,使用
元素可以非常方便的使一行文本相对于另一行文本来定位。使用“元素还可以使用户在同一时间里选择和复制多行文字。
tspan示例
tspanline1tspanline2
下面是上面代码的返回结果:
tspan line 1tspan line 2
注意上面的返回结果中,由于“元素没有设置其它参数,默认情况下第二行文字会紧跟着第一行文字排列。
垂直定位
如果你希望每一行文字都相对于前一行文字垂直定位,你可以在`元素中使用
dy`属性:
tspanline1tspanline2
现在第二行文字会显示在第一行文字下方,距离为10像素。下面是上面代码的返回结果:
tspan line 1tspan line 2
如果你希望元素在`text`中在垂直方向绝对定位某个指定的数值,可以设置
元素的y
属性。
如果你在属性中写了多个数字,那么每一个数字会被应用到
元素的每一个字符上。看下面的例子:
123
下面是返回结果,注意各个字符在垂直方向上的变化。
123
水平定位
要使每一行文本在X轴方向上相对定位可以使用dx
属性。下面的例子展示了将dx
的值设置为30的效果,现在第二行文字在水平方向上相对于第一行文字向右偏移了30像素。
tspanline1tspanline2
tspan line 1tspan line 2
SVG基础 | SVG tspan 元素-Web前端之家。如果你在属性中写了多个数字,那么每一个数字会被应用到
元素的每一个字符上。看下面的例子:
123
下面是返回结果,注意各个字符在水平方向上的变化。
123
你可以在元素设置`x`属性来修正
元素的X坐标。使用这种方法你可以显示多行头部对齐的文字。来看下面的例子,x
属性设置为10:
tspanline1tspanline2tspanline3
下面是上面代码的返回结果:
tspan line 1tspan line 2tspan line 3
为tspan元素添加样式
我们可以为元素添加样式,例如你可以将一个
元素中的文字设置为加粗字体:
这是一个被加粗的文字。
下面是上面代码的返回结果:
这是一个被加粗的文字。
通过baseline-shift设置上标和下标效果
你可以通过baseline-shift
CSS属性将一个“元素设置为上标或下标。看下面的例子:
这是一个tspan元素的上标和下标混合的文本串效果。
这是一个tspan元素的上标和下标混合的文本串效果。
返回SVG教程目录