文本（一）text、tspan的基本使用

在SVG中，文本元素是通过和这两个基本元素来创建的。元素是文本容器，而元素是文本子块。通过和元素，我们可以实现各种文本效果，包括文本样式的控制、文本对齐方式的设置、文本路径的排列等。

一、元素的属性

元素的属性主要包括以下几个：

• x：文本的起始位置（相对于父元素左上角的X轴偏移量）。
• y：文本的起始位置（相对于父元素左上角的Y轴偏移量）。
• dx：文本的X轴偏移量。
• dy：文本的Y轴偏移量。
• rotate：文本的旋转角度。
• text-anchor：文本的对齐方式（start、middle、end）。
• font-size：文本的字号。
• font-family：文本的字体。
• fill：文本的颜色。
• stroke：文本的轮廓颜色。
• stroke-width：文本的轮廓宽度。

二、元素的属性

元素是元素的子元素，它可以用来创建一个文本子块。

元素的属性主要包括以下几个：

• x：文本子块的起始位置（相对于父元素左上角的X轴偏移量）。
• y：文本子块的起始位置（相对于父元素左上角的Y轴偏移量）。
• dx：文本子块的X轴偏移量。
• dy：文本子块的Y轴偏移量。
• rotate：文本子块的旋转角度。
• text-anchor：文本子块的对齐方式（start、middle、end）。
• font-size：文本子块的字号。
• font-family：文本子块的字体。
• fill：文本子块的颜色。
• stroke：文本子块的轮廓颜色。
• stroke-width：文本子块的轮廓宽度。

三、使用和元素创建文本

使用和元素创建文本非常简单，只需按照以下步骤操作即可：

1. 创建一个元素，并设置其属性（例如，x、y、font-size等）。
2. 在元素中，创建任意数量的元素，并设置其属性（例如，x、y、font-size等）。
3. 在元素中，添加文本内容。

四、文本效果

除了基本的文本绘制功能外，SVG还可以通过和元素实现各种文本效果，包括：

• 文本样式的控制：可以通过和元素的属性来控制文本的样式，例如，字号、字体、颜色等。
• 文本对齐方式的设置：可以通过和元素的text-anchor属性来设置文本的对齐方式，包括左对齐、居中对齐和右对齐。
• 文本路径的排列：可以通过元素来让文本在指定的路径上排列。

五、实例

下面是一个使用和元素创建文本的简单实例：

<svg width="400" height="100">
  <text x="10" y="20" font-size="20">Hello, world!</text>
</svg>

这段代码会创建一个文本元素，并在其内部创建一个文本子块。文本子块的内容是“Hello, world!”，文本子块的字号为20像素。

您还可以使用元素来实现更复杂的文本效果。例如，您可以使用元素来创建多行文本，或者您可以使用元素来创建不同样式的文本。

通过使用和元素，您可以实现各种文本效果，从而使您的SVG图形更加丰富和美观。