<tspan>

SVG 的 **<tspan>** 元素在 <text> 元素或其他 <tspan> 元素中定义子文本。它允许根据需要调整该子文本的样式和/或位置。

注意：<tspan> 元素默认不换行，要实现换行需要使用 white-space CSS 属性进行样式设置。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
    text {
      font: italic 12px serif;
    }
    tspan {
      font: bold 10px sans-serif;
      fill: red;
    }
  </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>

属性

x: 文本基线的起始点的 x 坐标，或者如果提供了一系列值，则为每个单独字形的 x 坐标。值类型：(<length>|<percentage>) 列表；默认值：0；可动画：是
y: 文本基线的起始点的 y 坐标，或者如果提供了一系列值，则为每个单独字形的 y 坐标。值类型：(<length>|<percentage>) 列表；默认值：0；可动画：是
dx: 从上一个文本元素水平偏移文本位置，或者如果提供了一系列值，则偏移每个单独字形的位置。值类型：(<length>|<percentage>) 列表；默认值：无；可动画：是
dy: 从上一个文本元素垂直偏移文本位置，或者如果提供了一系列值，则偏移每个单独字形的位置。值类型：(<length>|<percentage>) 列表；默认值：无；可动画：是
rotate: 旋转每个单独字形的方向。可以单独旋转字形。值类型：<list-of-number>；默认值：无；可动画：是
lengthAdjust: 如何拉伸或压缩文本以适应 textLength 属性定义的宽度。值类型：spacing|spacingAndGlyphs；默认值：spacing；可动画：是
textLength: 文本应缩放以适应的宽度。值类型：<length>|<percentage>；默认值：无；可动画：是

使用上下文

类别	文本内容元素，文本内容子元素
允许的内容	字符数据和任意数量的以下元素，可以按任何顺序排列描述性元素 `<a>`，`<animate>`，`<set>`，`<tref>`，`<tspan>`

规范

规范
可缩放矢量图形 (SVG) 2 # TextElement

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

white-space