The <textPath> element renders text along an arbitrary path, given either inline with the SVG 2 path attribute or by reference with href.
It must be a child of a <text> element.
A <textPath> lets text flow along the curve of any <path> instead of in a straight horizontal line - think of a label hugging the edge of a circle, a headline bent along a wave, or caption text tracking the outline of a shape. Write the geometry directly in the path attribute, or reference a shape by its id with href, and SVG lays out each glyph along that geometry, automatically rotating it to follow the local tangent. The startOffset attribute controls where along the path the text begins, allowing fine adjustment or animation.
<textPath> must always live inside a <text> element; it cannot be used on its own.
| Attribute | Default | Description |
|---|---|---|
| path | (none) | Path data laid out in this element's own user space. Takes precedence over href. |
| href | (none) | Reference to a <path> or any basic shape, whose equivalent path is used. Supplies the geometry when path is absent or yields none. |
| startOffset | 0 | Offset along the path where text begins |
| method | align | align places each glyph rigidly on the tangent. stretch asks for warped glyph outlines, which is parsed but rendered as align. |
| side | left | left or right. right places text on the other side by reversing the direction of travel. |
| spacing | exact | exact advances glyphs by their shaped widths. auto leaves the choice to the user agent, and Donner chooses the same spacing as exact. |
1.15.0 