<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>`