9.12 SVG 文本(text)

和位图不同,SVG中的文本是独立对象

传统图像中的文本实际上是已经栅格(像素)化为了点阵图,并不再具备文本的特性。 而SVG图像中的文本由于是独立对象存在,要灵活得多,可以实现更多的图文交互效果,而且可以被搜索引擎所索引。 不过SVG文本不能自动换行,不适合用来描述大段动态文本,这是一个缺点。

text 标签

text 标签用来创建SVG文本元素。

例子1 - 简单文本和变换

代码如下:

代码解释如下:

  • x="" 指明文字的左下角的X坐标。如果定义的属性值没有给出单位,则缺省是当前用户坐标系的单位,缺省值为0。
  • y="" 指明文字的左下角的Y坐标。缺省值为0。
  • fill="" 用来指明文本的填充颜色。
  • transform 用来定义SVG的基本变换,后续进阶课程里将集中描述。这里定义了一个简单的文本旋转。

例子2 - 多行文本

<text> 元素可以通过 <tspan> 元素来分组成多行来显示。每个 tspan 元素可以定义自己独特的格式和位置。

代码如下:

例子3 - 链接文本

和HTML文档类似,SVG中也可以使用链接元素,和文本结合构成跳转链接文本

代码如下:

代码解释如下:

  • xmlns:xlink=""这一句引入了xlink命名空间,以支持链接元素属性定义。
  • xlink:href和html中的a链接类似,只是多了xlink的命名空间前缀,用来表示链接的目的地址。