W3cubDocs

/SVG

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

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

Specifications

Browser compatibilityUpdate compatibility data on GitHub

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

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