8.文本 <text>
示例8.1
写一个文本：
欢迎访问wwww.waylau.com
<svg height="30" width="200">
<text x="0" y="15" fill="red">欢迎访问wwww.waylau.com </text>
</svg>
示例8.2
让文本转个角度：
欢迎访问wwww.waylau.com
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(10 20,40)">欢迎访问wwww.waylau.com</text>
</svg>
示例8.3
让文本引用path：
欢迎访问www.waylau.com个人博客欢迎访问www.waylau.com
<svg width="500" height="220">
<defs>
<path id="myTextPath2"
d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>
<text x="10" y="100" style="stroke: #000000;">
<textPath xlink:href="#myTextPath2">
欢迎访问www.waylau.com个人博客欢迎访问www.waylau.com
</textPath>
</text>
</svg>
示例8.4
可以使用 <tspan> 将文本元素分成几部分，允许每部分有各自的样式
Several lines: 欢迎访问 wwww.waylau.com
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">欢迎访问</tspan>
<tspan x="10" y="70">wwww.waylau.com</tspan>
</text>
</svg>
示例8.5
使用 <a> 使文本变成一个链接
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.waylau.com" target="_blank">
<text x="0" y="15" fill="red">欢迎访问wwww.waylau.com</text>
</a>
</svg>
示例8.6
垂直样式
欢迎访问wwww.waylau.com欢迎访问wwww.waylau.com
<svg height="260" width="200">
<text x="10" y="10" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 0;">
欢迎访问wwww.waylau.com
</text>
<text x="110" y="10" fill="red" style="writing-mode: tb; glyph-orientation-vertical: 90;">
欢迎访问wwww.waylau.com
</text>
</svg>
