svg标签 text 标签和tspan标签的应用+代码

前言

在SVG（可缩放矢量图形）中，<text>标签是用来在图像中呈现文本内容的元素。而<tspan>标签则是用来指定<text>元素内的文本片段的位置和样式。本文将详细介绍<text>标签和<tspan>标签的应用和使用方法，并提供相应的代码示例。

1. 标签的基本用法

<text>标签用于在SVG图像中插入文本，并可以通过属性来控制文本的位置、样式和其他属性。以下是<text>标签的基本用法的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="50" y="50">这是一段文本</text>
</svg>

上述代码中，x和y属性分别指定了文本的水平和垂直位置。

2. 标签的应用

<tspan>标签用于在<text>元素内指定具有不同样式或位置的文本片段。以下是<tspan>标签的应用示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text>这是<tspan fill="red" font-size="20">一段</tspan>文本</text>
</svg>

上述代码中，<tspan>标签内的fill和font-size属性分别指定了文本片段的颜色和字体大小。

3. 和标签的组合使用

<text>标签和<tspan>标签可以组合使用，以实现更复杂的文本效果。以下是一个使用<text>和<tspan>标签组合的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text>你好，<tspan fill="blue">世界</tspan>!</text>
</svg>

上述代码中，<tspan>标签内的fill属性指定了"世界"字样的颜色。

4. 和标签的其他属性

除了位置和样式外，<text>和<tspan>标签还支持其他一些属性，如text-anchor用于指定文本的对齐方式，textLength用于指定文本的长度等。以下是一个应用了这些属性的示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="50" y="50" text-anchor="middle">居中对齐</text>
  <text x="100" y="100" textLength="100">限定长度</text>
</svg>

上述代码中，两个<text>元素分别通过text-anchor和textLength属性来设置文本的对齐方式和长度。