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>, enclose the given text in 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 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
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 has no effect.
Value type: <URL> ; Default value: none; Animatable: yes
lengthAdjust
This attribute indicates where length adjustment should be applied to the text: only in the spacing between glyphs, or to both the spacing and the glyphs themselves.
Value type: spacing|spacingAndGlyphs; Default value: spacing; Animatable: yes
method
This attribute defines which method should be used to render individual glyphs along the path.
Value type: align|stretch ; Default value: align; Animatable: yes
path
This attribute defines the path on which the text should 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 specifies how space between glyphs should be handled.
Value type: auto|exact ; Default value: exact; Animatable: yes
startOffset
This attribute specifies how much 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
This attribute specifies 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

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

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<textPath>' in that specification.
Candidate Recommendation  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<textPath>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3
Notes
Full support 3
Notes
Notes Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3
Notes
Full support 3
Notes
Notes Until Safari 6, textPath was not re-rendered when the referenced path was changed dynamically (see bug 15799)
Samsung Internet Android ?
hrefChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
methodChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
path
Experimental
Chrome ? Edge ? Firefox Full support 61IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 61Opera Android ? Safari iOS ? Samsung Internet Android ?
side
Experimental
Chrome No support NoEdge No support NoFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
spacingChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
startOffsetChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
xlink:href
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support 3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 3Samsung Internet Android ?

Legend

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

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,