9. SVG中的text元素

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>

在这个例子中，"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>