<textPath>

In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a <path> element. To specify that a block of text is to be rendered along the shape of a <path>, include the given text within a <textPath> element which includes an href attribute with a reference to a <path> element.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <!-- to hide the path, it is usually wrap into a <defs> element -->
  <!-- <defs -->
  <path id="MyPath" fill="none" stroke="red"
          d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">
      The quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

</svg>

Attributes

href

This attribute defines the URL to the path or basic shape on which the text must be rendered. If the path attribute is also set, href as no effect.
Value type: <URL> ; Default value: none; Animatable: yes

lengthAdjust

This attribute indicates where length adjustement should be happening on text.
Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes

method

This attribute defines which method must be used to render individual glyphes along the path.
Value type: align|stretch ; Default value: align; Animatable: yes

path

This attribute defines the path on which the text must be rendered.
Value type: <path_data> ; Default value: none; Animatable: yes

side

This attribute indicates on which side of the path the text should be rendered.
Value type: left|right ; Default value: left; Animatable: yes

spacing

This attribute lets specify how space between glyphes should be handled.
Value type: auto|exact ; Default value: exact; Animatable: yes

startOffset

This attribute lets specify how much the begining of the text should be offset from the begining of the path.
Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes

textLength

This attribute lets specify the width of the space into which the text will render.
Value type: <length>|<percentage>|<number> ; Default value: auto; Animatable: yes

Global attributes

Core Attributes

Most notably: id, tabindex

Styling Attributes

class, style

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

XLink Attributes

xlink:title

Usage notes

Specifications

Browser compatibilityUpdate compatibility data on GitHub