Firefox Tomorrow

svg element

<text>

View on MDN ↗

The <text> SVG element draws a graphics element consisting of text. It’s possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.

If text is included in SVG not inside of a <text> element, it is not rendered. This is different than being hidden by default, as setting the display property won’t show the text.

[!NOTE] The <text> element does not wrap by default, to make this happen it needs to be styled with the white-space CSS property.

Usage context

Attributes

  • x
    • : The x coordinate of the starting point of the text baseline, or the x coordinate of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: 0; Animatable: yes
  • y
    • : The y coordinate of the starting point of the text baseline, or the y coordinate of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: 0; Animatable: yes
  • dx
    • : Shifts the text position horizontally from a previous text element, or shifts the position of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: none; Animatable: yes
  • dy
    • : Shifts the text position vertically from a previous text element, or shifts the position of each individual glyph if a list of values is provided. Value type: List of (<length> | <percentage>); Default value: none; Animatable: yes
  • rotate
    • : Rotates orientation of each individual glyph. Can rotate glyphs individually. Value type: <list-of-number>; Default value: none; Animatable: yes
  • lengthAdjust
    • : How the text is stretched or compressed to fit the width defined by the textLength attribute. Value type: spacing | spacingAndGlyphs; Default value: spacing; Animatable: yes
  • textLength
    • : A width that the text should be scaled to fit. Value type: <length> | <percentage>; Default value: none; Animatable: yes

DOM Interface

This element implements the SVGTextElement interface.

Example

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

<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>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also