SVG (Scalable Vector Graphics) 提供了强大的文本渲染能力，其中<text>元素是常用 的文本操作的元素。本文将详细介绍<text>标签的基本使用方法，并展示如何通过<tspan>和<textPath>增强文本的表现力。
<text>标签基础
<text>元素用于在SVG图像中添加文本。它的基本语法如下：
<svg width="200" height="200"><text x="10" y="50">Hello, SVG!</text>
</svg>
在这个例子中，x和y属性定义了文本的起始位置。这段代码会在SVG画布上的(10, 50)位置渲染文本"Hello, SVG!"。
使用<tspan>调整文本
<tspan>元素允许我们在单个<text>元素内部进行更细致的文本格式控制。例如，我们可以改变文本的一部分颜色或字体大小。
<svg width="200" height="200"><text x="10" y="50">Hello, <tspan fill="blue">SVG</tspan>!</text>
</svg>
使用<textPath>沿路径排布文本
<textPath>元素可以让文本沿着SVG中的路径元素排布。首先，我们需要定义一个<path>元素：
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" ><defs><path id="myPath" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></defs><text><textPath xlink:href="#myPath">文本沿路径排布</textPath></text>
</svg>
在这个例子中，文本将沿着定义的曲线路径排布。
结合使用<tspan>和<textPath>
我们可以将<tspan>和<textPath>结合使用，以在路径上创建多样化的文本效果。
<svg width="200" height="200"><path id="myPath" d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/><text font-size="12" fill="black"><textPath href="#myPath">沿着曲线 <tspan fill="red">移动</tspan> 的文本</textPath></text>
</svg>
在这个例子中，"移动"两字将以红色突出显示，并沿着曲线路径排布。
text的用法还很多，特别是结合滤镜、动画使用，能生成各种各样炫酷的效果。
