tspan

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

在 <text>元素中，利用内含的tspan元素，可以调整文本和字体的属性以及当前文本的位置、绝对或相对坐标值。

使用上下文

类别	文本内容元素、文本内容子元素
允许的内容	字符数据和任意数量、任意顺序的下列元素：描述性元素 `<a>`、`<animate>`、`<discard>`、`<set>`、`<tspan>`

示例

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">
    你
    <tspan>不是</tspan>
    香蕉！
  </text>
</svg>