<textPath>

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
textPathChrome 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 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 Yes
Notes
Full support Yes
Notes
Notes Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Edge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support Yes
Notes
Full support Yes
Notes
Notes Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Only accepts references to path elements. Basic shapes (rect, circle, ellipse, line, polygon, polyline) won't work.
Samsung 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 NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
path
Experimental
Chrome No support NoEdge ? Firefox Full support 61IE ? Opera ? Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 61Opera Android ? Safari iOS No support NoSamsung 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 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 ? 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 YesFirefox 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 YesFirefox 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.