• 元素：作为文本块的容器，它定义了文本的起始位置（x和y属性）。
• 元素：用于在元素内部对文本进行更精细的控制。它可以改变文本的样式、位置、旋转等。通过多个，我们可以模拟出多行文本、不同颜色/字号的文本片段等效果。

示例：使用实现多行文本和局部样式

假设我们想在SVG中显示“质量 m1 = 10kg”，其中“10”是可变的，并且“kg”需要与前面的数字对齐。

<svg width="200" height="100" style="border: 1px solid #ccc;">
  <text id="m1Caption" x="10" y="40" font-family="Arial" font-size="16">
    质量 m1 = 
    <tspan id="m1Value" fill="blue" font-weight="bold">10</tspan>
    <tspan dx="2">kg</tspan> <!-- dx属性用于微调当前tspan的x坐标 -->
  </text>

  <text x="10" y="70" font-family="Arial" font-size="14" fill="#666">
    多行文本示例：
    <tspan x="10" dy="20">这是第一行。</tspan> <!-- dy属性用于相对于当前位置的垂直偏移 -->
    <tspan x="10" dy="20">这是第二行。</tspan>
  </text>
</svg>

在这个例子中：

• 我们通过为“10”设置了蓝色和粗体样式。
• dx="2"属性用于将“kg”向右微调2个单位，使其与数字保持适当间距。
• 通过设置x和dy属性，可以在内部创建多行文本效果。

这种方法完全利用了SVG的原生能力，保持了SVG的矢量特性和可伸缩性。

企业级AI数据表格智能体平台

替代方案：foreignObject元素

如果确实需要在SVG内部嵌入复杂的HTML内容，例如包含表单控件、段落文本或需要HTML布局能力的富文本，SVG提供了一个特殊的元素：。

foreignObject元素允许你在SVG图像中包含来自其他XML命名空间的元素，最常见的就是HTML内容。它定义了一个矩形区域，在这个区域内，你可以放置任意的HTML元素，浏览器会像渲染普通HTML一样渲染它们。

示例：使用foreignObject嵌入HTML

<svg width="300" height="150" style="border: 1px solid #ccc;">
  <!-- SVG文本部分 -->
  <text x="10" y="30" font-family="Arial" font-size="18" fill="green">
    SVG文本：
  </text>

  <!-- foreignObject嵌入HTML div -->
  <foreignObject x="100" y="10" width="180" height="80">
    <div xmlns="http://www.w3.org/1999/xhtml" style="border: 1px dashed red; padding: 5px; background-color: #f9f9f9;">
      <p style="margin: 0;">这是一个嵌入在SVG中的HTML div。</p>
      <input type="text" value="输入框" style="width: 100px;">
    </div>
  </foreignObject>

  <text x="10" y="120" font-family="Arial" font-size="18" fill="green">
    更多SVG文本。
  </text>
</svg>

注意事项：