<textPath>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

The <textPath> SVG element is used to render text along the shape of a <path> element. The text must be enclosed in the <textPath> element and its href attribute is used to reference the desired <path>.

Example

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

Usage context

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

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# TextPathElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textPath
fill
context-fill value
href
path
Experimental
side
Experimental
spacing
startOffset
systemLanguage
textLength
xlink:href
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.