零基础教你学前端——46、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 ，属性值一般写为 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。保存。回到浏览器，刷新，点击文本链接，在新窗口里打开了本地的网页。

文章配套视频链接https://www.bilibili.com/vide...