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>.
<svgviewBox="0 0 100 100"xmlns="http://www.w3.org/2000/svg"><!-- to hide the path, it is usually wrapped in a <defs> element --><!-- <defs> --><pathid="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><textPathhref="#MyPath">Quick brown fox jumps over the lazy dog.</textPath></text></svg>
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
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
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
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.