概要总结
1、文本属性
2、普通文本
3、旋转文本
4、多行文本
5、文本链接
一、文本属性
1、x: 文本位置的x坐标，Number类型。
2、y: 文本位置的y坐标，Number类型。
3、dx: 基于x坐标的水平偏移量，Number类型。
4、dy: 基于y坐标的垂直偏移量，Number类型。
5、font-size: 文本的大小，Number类型。
6、text-anchor: 文本的对齐方式，有以下3个值：
(1)start：以文本左端对齐
(2)middle：以文本中间对齐
(3)end：以文本末尾对齐
7、transform：文本旋转，详情看以下第三点
二、普通文本
<svg width="300" height="30" style="background: #eee">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
三、旋转文本
我们给text标签定义transform属性，值为rotate函数。在小括号里定义两个参数，第一个参数是旋转角度，第二个参数是旋转的中心点坐标，这个参数在缺省情况下默认原点(0,0)，两个参数之间用空格分开。
<svg width="200" height="60" style="background: #eee">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG!</text>
</svg>
四、多行文本
text元素可以包裹多个tspan子元素，每个tspan元素可以包含不同的格式和位置。
<svg width="200" height="90" style="background: #eee">
<text x="10" y="20" fill="red">
Several lines
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
五、文本链接
给文本添加链接的方法，就是把text标签用a标签包裹起来，给a标签添加xlink:href属性，属性值就是链接的地址。也可以定义target属性。
这里为什么不直接用href属性呢？实际上svg是引用xml语法定义元素的，我们还要在svg标签上定义一个命名空间的属性xmlns:xlink，属性值一般写为w3c的这个网址：www.w3.org/1999/xlink。
<svg width="200" height="30" xmlns:xlink="https://www.w3.org/1999/xlink" style="background: #eee">
<a xlink:href="https://www.baidu.com" target="_blank">
<text x="10" y="15" fill="red">I love SVG</text>
</a>
</svg>
六、代码演示
七、代码链接
