SVG <text>

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。在 SVG 中，可以使用 <text> 元素来显示文本内容。

使用 <text> 元素显示文本

在 SVG 中，使用 <text> 元素可以显示文本内容。下面是一个简单的示例，演示如何在 SVG 中显示文本：

<svg width="200" height="100">
  <text x="10" y="50">Hello, SVG!</text>
</svg>

在上面的示例中，我们创建了一个宽度为 200 像素，高度为 100 像素的 SVG 元素，并在其中使用 <text> 元素显示了文本 "Hello, SVG!"。x 和 y 属性用于指定文本的位置。

设置文本样式

可以使用 CSS 样式来设置文本在 SVG 中的样式。下面是一个示例，演示如何设置文本的颜色、字体大小和字体样式：

<svg width="200" height="100">
  <text x="10" y="50" fill="red" font-size="20" font-family="Arial">Styled Text</text>
</svg>

在上面的示例中，我们通过设置 fill 属性来指定文本的颜色，font-size 属性来指定字体大小，font-family 属性来指定字体样式。

使用 <tspan> 元素

<tspan> 元素可以用来在 <text> 元素内创建多行文本。下面是一个示例，演示如何在 SVG 中使用 <tspan> 元素创建多行文本：

<svg width="200" height="100">
  <text x="10" y="50">
    <tspan x="10" dy="1.2em">Line 1</tspan>
    <tspan x="10" dy="1.2em">Line 2</tspan>
  </text>
</svg>

在上面的示例中，我们在一个 <text> 元素内使用了两个 <tspan> 元素，通过设置 dy 属性来指定每行文本的垂直间距。

通过以上内容，你已经了解了在 SVG 中显示文本的基本方法以及如何设置文本的样式和创建多行文本。在接下来的章节中，我们将继续深入探讨 SVG 的其他方面。