<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