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 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>`, `<set>`, `<tref>`, `<tspan>`

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # TextPathElement

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