Docs4dev
Docs
svg / latest / element / text.html

<text>

The SVG <text> 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.

Example

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

Attributes

x

The x coordinate of the starting point of the text baseline. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

y

The y coordinate of the starting point of the text baseline. Value type: <length>|<percentage> ; Default value: 0; Animatable: yes

dx

Shifts the text position horizontally from a previous text element. Value type: <length>|<percentage> ; Default value: none; Animatable: yes

dy

Shifts the text position vertically from a previous text element. Value type: <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

Global attributes

Core Attributes

Most notably: id, tabindex

Styling Attributes
class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight
Conditional Processing Attributes

Most notably: requiredExtensions, systemLanguage

Event Attributes

Global event attributes, Graphical event attributes

Presentation Attributes

Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility

Aria Attributes

aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Usage notes

Categories Graphics element, Text content element
Permitted content Character data and any number of the following elements, in any order:
Animation elements
Descriptive elements
Text content child elements
<a>

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# TextElement

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
text 1 12 1.5 9 8 3 3 Yes 4 Yes 3 Yes
dx Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
dy Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
lengthAdjust Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
rotate Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
textLength Yes 12 Yes 11 Yes Yes Yes Yes Yes Yes Yes Yes
x Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
y Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text