SVG 文本

SVG ：添加文本到图形

元素介绍

<text> 元素允许你在 SVG 图形中嵌入文本内容。这些文本被渲染为图形元素，并且可以像其他 SVG 形状一样设置样式、进行变换和操作。

示例 1：基本文本

显示一个简单的文本字符串：

文本“I love SVG!”以红色渲染。

SVG 代码：

<svg width="200" height="30">
  <text x="0" y="15" fill="red" font-family="Arial" font-size="16">
    I love SVG!
  </text>
</svg>

主要属性：

• x：文本基线起始点的 x 坐标。
• y：文本基线起始点的 y 坐标。
• fill：设置文本颜色。
• font-family、font-size、font-weight：可以应用标准的 CSS 字体属性。

提示：对于精确的文本对齐，text-anchor 属性（值：start、middle、end）非常有用。例如，text-anchor=“middle” 将使文本在其给定的 x 坐标处水平居中。

示例 2：旋转文本

对文本应用旋转变换：

文本“I love SVG”以红色渲染并旋转。

SVG 代码：

<svg width="200" height="60">
  <text x="0" y="15" fill="red" font-family="Verdana" font-size="16" transform="rotate(30 20,40)">
    I love SVG
  </text>
</svg>

代码解释：

• transform=“rotate(angle cx,cy)“：旋转文本。angle 是旋转角度（单位：度）。cx,cy 是旋转中心的可选坐标。如果省略，旋转将围绕当前用户坐标系的 (0,0) 点进行。

示例 3：使用 实现多行文本

<tspan> 元素用于 <text> 元素内部，以便对文本的一部分应用不同的样式或定位，或者创建多行文本。

在多行上显示的文本：

标签“Several lines:”，后跟“First line.”和“Second line.”，分别在后续行上显示，全部为红色。

SVG 代码：

<svg width="200" height="90">
  <text x="10" y="20" style="fill:red; font-family:sans-serif; font-size:14px;">
    Several lines:
    <tspan x="10" dy="1.2em">First line.</tspan>
    <tspan x="10" dy="1.2em">Second line.</tspan>
  </text>
</svg>

代码解释：

• 每个 <tspan> 元素都可以有自己的 x、y、dx 或 dy 属性用于定位。
• dy=“1.2em”：将 <tspan> 定位在先前文本位置下方 1.2 ems，有效地创建新的一行。em 是相对于当前字体大小的单位。

示例 4：文本作为链接

你可以将 SVG 文本包裹在 <a> (锚点) 元素中，使其变为可点击。

可点击的文本“I love SVG!”以红色显示。

SVG 代码：

<svg width="200" height="30">
  <a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank">
    <text x="0" y="15" fill="blue" style="text-decoration: underline; font-family:Arial; font-size:16px;">
      I love SVG!
    </text>
  </a>
</svg>

代码解释：

• <a> 元素使用 href 属性指定链接目标。
• target=“_blank” 在新标签页/窗口中打开链接。
• 链接的样式（如下划线和颜色）应应用于 <text> 元素或通过 CSS 实现。

实际应用：

SVG 文本用于图表中的标签、图像上的动态文本叠加、交互式 UI 元素以及可访问的图形文本。当文本传达重要信息时，务必为 <title> 和 <desc> 元素提供内容以提高可访问性。