标签 在svg中用使用标签去定义一段文字。如 example 1
在svg中写下
在平坦的路上曲折前行
example 1 dome
在平坦的路上曲折前行
在例子1中 x=0 y=15 是文字定位坐标
可能你会有疑问,为什么文字没有距离上边是15呢?这里首先你需要了解个概念baseline 熟悉css的同学会眼熟 会用到 vertical-align: baseline; 但是什么是 baseline呢?
这不是我们的重点了解移步到《css baseline: the good, the bad and the ugly》 译文:《css基线之道》
在svg中xy 的坐标就是 基于baseline 如图:
所以就看不到预想的文字没有距上边15px。
标签 你也可以把标签 设定为文本组,其中可以包含,而且每个都可以有不同的定位和文本格式。
example 2 dome
several lines: first line. second line.
如果没有设置tspan 的 x y 那么文本会类似 css 中行内展示
svg中的文字连接 你可以把文字设置成链接
example 3 dome
i love svg!
这里注意下,按照html的习惯直接在a 标签里写文字是不可以的,文字不会显示,这里文字是个文本对象,你要设置这个对象的链接。
transform 到现在svg中的文字标签能满足常规的需要,看似简单,其实不然“大有可为”!~
比如让文字旋转下example 4
example 4 dome
在平坦的路上曲折前行
transform=rotate(30 20,40) 表示在 (20.40)位置顺时针旋转30度
dx dy svg 中虽然没有提供排版的相关支持,但是你可以 通过 dx dy 来设置错落的文字
让我们感受下:
example 5 dome
12345 12345 12345 我爱你中国
rotate rotate 文字的旋转属性,rotate可以是个数值列表分别作用于对应的字母,如下面例子
example 6 dome
在平坦的路上曲折前行
还是得把baseline拿出来,旋转的单位是度,因为我们的习惯是屏幕定位,所以旋转是沿着y轴顺时针旋转。旋转基于每个字母的基线和字母左边。在例子中,文字(字母)是多于rotate的,这时候按照rotate list 的最后一个规则定义多出的字母。
textlength textlength不好理解,不是文字的长度的意思,指定文字以 textlength 的 svg viewer去两端对齐排这些文字类似 css text-align:justify
example 7 dome
在平坦的路上曲折前行
还有个属性配合textlength使用----lengthadjust
lengthadjust 有两个值spacing (默认)和 spacingandglyphs当设置成spacingandglyphs的时候,会拉伸字母,知道适合充满textlength 不太好理解,看下实例就懂了。
example 7 dome
在平坦的路上曲折前行 在平坦的路上曲折前行
的使用 标签的使用:
使用过illustrator的朋友都知道,我们可以让文字跟随路径,做出各种形状的文字。我们需要用来定义(会在大漠之后相关文章中介绍)。定义好路径后,文字就可以跟着定义的路径跑了。
example 8 dome
在平坦的路上曲折前行 在平坦的路上曲折前行
xlink:href 来指定 startoffset 来指定在路径上的起始位置。
这里xlink:href 不但能指定路径,还能指定一段文字。如例子:
example 9 dome