SVG绘制文本

在SVG中，通过 text 标签来绘制文本，它是一个双标签，基本语法为：尖角号 text，尖角号 /text，标签里填写文本的内容。

它的 属性 x 和 属性y，定义文本的位置坐标，值为数字。

还有两个常用属性：

font-size，定义文本的大小，值为数字。

text-anchor，定义文本的对齐方式。有三个值：start，以文本左端对齐；middle，以文本中间对齐；end，以文本末尾对齐。

我们做个例子。

新建一个文件 text.html，补全基础代码，在 body 里添加一个 svg 标签，定义属性 width 等于 300，height 等于 30。

在 svg 里添加 text 标签，text 里写入一些文本，定义属性 x 等于 0，y 等于 5，fill 等于 red。保存文件。

在浏览器中预览，一段文本绘制好了。

这里你可能会问：svg 里为什么不用 p 标签来显示文本呢？我们知道，svg 是在一个画布里绘制图形，text 也是绘制的对象。这样，我们就可以使用 svg 的一些专有特性控制文本了，比如旋转文本。

我们给 text 标签定义 transform 属性，值为 rotate 函数，在小括号里定义两个参数：

第一个参数是旋转角度。

第二个参数，是旋转的中心点坐标。此参数缺省默认为原点(0,0) (读作零零)。两个参数之间用空格分开。

回到编辑器，在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签，属性 width 等于 200，height 等于 60。

在 svg 里添加 text 标签，text 里写入一些文本，定义属性 x 等于 0，y 等于 15，fill 等于 red。定义 transform 属性，值为 rotate，小括号，30 空格，20,40 rotate(30 20,40)。保存。

回到浏览器，刷新，文本旋转了。

text 元素可以包裹多个 tspan 子元素。每个 tspan 元素可以包含不同的格式和位置。

回到编辑器，在上个 svg 结尾处添加一个 br 标签。回车换行。

再添加一个新的 svg 标签，属性 width 等于 200，height 等于 90。

在 svg 里添加 text 标签，定义属性 x 等于 10，y 等于 20，fill 等于 red。text 里写入一些文本。

在文本的下方，定义一个 tspan 标签，属性 x 等于 10， y 等于 45，里面写入一些内容。

复制一个 tspan，属性 x 等于 10， y 等于 70，改写一下里面的内容。

回到浏览器，刷新，三行文本显示出来了。

你可能会问：text 绘制的文本可以添加链接吗？可以的。

给文本添加链接的方法，就是把 text 标签用 a 标签包裹起来，给 a 标签添加 xlink:href 属性，属性值就是链接的地址，也可以定义 target 属性。

这里为什么不直接用 href 属性呢？实际上 svg 是应用 xml 语法定义元素的，我们还要在 svg 标签上定义一个命名空间的属性 xmlns:xlink (读作xml n s 冒号 xlink)，属性值一般写为 w3c 的这个网址 (​​http://www.w3.org/1999/xlink​​​)。这里大家不必深究，直接照着写下来即可。

回到编辑器，在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签，属性 width 等于 200，height 等于 30，xmlns:xlink 等于这个网址。

在 svg 里添加 a 标签，定义 xlink:href 属性，值为一个链接地址，我们设置为本地的一个 html 文件。

在 a 标签里添加 text 标签，填入一些文本。给 text 定义属性 x 等于 0，y 等于 15，fill 等于 red。保存。

回到浏览器，刷新，点击文本链接，在新窗口里打开了本地的网页。