W3cubDocs

/SVG

<textPath>

To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element.

Example

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in 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">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

Attributes

href

The URL to the path or basic shape on which to render the text. If the path attribute is set, href has no effect. Value type: <URL> ; Default value: none; Animatable: yes

lengthAdjust

Where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes

method

Which method to render individual glyphs along the path. Value type: align|stretch ; Default value: align; Animatable: yes

path Experimental

The path on which the text should be rendered. Value type: <path_data> ; Default value: none; Animatable: yes

side Experimental

Which side of the path the text should be rendered. Value type: left|right ; Default value: left; Animatable: yes

spacing

How space between glyphs should be handled. Value type: auto|exact ; Default value: exact; Animatable: yes

startOffset

How far the beginning of the text should be offset from the beginning of the path. Value type: <length>|<percentage>|<number> ; Default value: 0; Animatable: yes

textLength

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

Usage notes

Categories Text content element, Text content child element
Permitted content Character data and any number of the following elements, in any order:
Descriptive elements
<a>, <altGlyph>, <animate>, <set>, <tref>, <tspan>

Specifications

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
textPath Yes 12 Yes Yes Yes
3Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Yes Yes Yes Yes
3Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Yes
href
50Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
12 Yes Yes
37Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
12.1Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
50Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
50Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Yes
37Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
12.2Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
5.0Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
path No No 61 No No No No No 61 No No No
side No No 61 No No No No No 61 No No No
spacing No No No No No No No No No No No No
startOffset Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
xlink_href Yes 12 Yes Yes Yes 3 Yes Yes Yes Yes 3 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/textPath