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.

<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
The path on which the text should be rendered.
Value type: <path_data> ; Default value: none; Animatable: yes
side
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 Attributes
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>, <animateColor>, <set>, <tref>, <tspan>

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
textPath Yes 12 Yes Yes Yes 3
3
Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
href Yes
Yes
Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
12 Yes Yes Yes 12.1
12.1
Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
method No No No No No No
path No No 61 ? ? No
side No No 61 No No No
spacing ? ? ? ? ? ?
startOffset Yes 12 Yes Yes Yes Yes
xlink:href Yes 12 Yes Yes Yes 3
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
textPath Yes Yes Yes Yes 3
3
Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Yes
href Yes
Yes
Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Yes
Yes
Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Yes Yes 12.2
12.2
Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Yes
Yes
Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
method No No No No No No
path No No 61 ? No No
side No No 61 No No No
spacing ? ? ? ? ? ?
startOffset Yes Yes Yes Yes Yes Yes
xlink:href Yes Yes Yes Yes 3 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/textPath