<text>

SVG 的 **<text>** 元素繪製一個由文字組成的圖形元素。可以像任何其他 SVG 圖形元素一樣，對 <text> 應用漸變、圖案、裁剪路徑、蒙版或濾鏡。

如果 SVG 中的文字不包含在 <text> 元素中，則不會渲染。這與預設隱藏不同，因為設定 display 屬性不會顯示文字。

注意：<text> 元素預設不換行，要實現換行，需要使用 white-space CSS 屬性進行樣式設定。

示例

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

html

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
    }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr {
      font: italic 40px serif;
      fill: red;
    }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

屬性

x: 文字基線的起始點的 x 座標，或者如果提供值列表，則為每個單獨字形的 x 座標。值型別：(<length>|<percentage>) 列表；預設值：0；可動畫：是
y: 文字基線的起始點的 y 座標，或者如果提供值列表，則為每個單獨字形的 y 座標。值型別：(<length>|<percentage>) 列表；預設值：0；可動畫：是
dx: 從以前的文字元素水平移動文字位置，或者如果提供值列表，則移動每個單獨字形的位置。值型別：(<length>|<percentage>) 列表；預設值：無；可動畫：是
dy: 從以前的文字元素垂直移動文字位置，或者如果提供值列表，則移動每個單獨字形的位置。值型別：(<length>|<percentage>) 列表；預設值：無；可動畫：是
旋轉: 旋轉每個單獨字形的方位。可以單獨旋轉字形。值型別：<list-of-number>；預設值：無；可動畫：是
lengthAdjust: 文字如何拉伸或壓縮以適應 textLength 屬性定義的寬度。值型別：spacing|spacingAndGlyphs；預設值：spacing；可動畫：是
文字長度: 文字應縮放以適應的寬度。值型別：<length>|<percentage>；預設值：無；可動畫：是

使用上下文

類別	圖形元素、文字內容元素
允許的內容	字元資料和以下任何數量的元素，以任何順序動畫元素描述性元素文字內容子元素 `<a>`