The <textPath> element renders text along an arbitrary path referenced by the href attribute.

It must be a child of a <text> element.

DOM object: SVGTextPathElement
SVG2 spec: https://www.w3.org/TR/SVG2/text.html#TextPathElement

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. You reference the target path by its id via the href attribute, and SVG lays out each glyph along the path's 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.

<defs>
  <path id="myPath" d="M 20 110 Q 160 -10 300 110" fill="none"/>
</defs>
<text font-size="22">
  <textPath href="#myPath">Text flows along the path</textPath>
</text>

Attribute	Default	Description
href	(none)	Reference to a <path> element
startOffset	0	Offset along the path where text begins
method	align	Parsed: align or stretch; rendering implements align only.
side	left	Parsed: left or right; rendering implements left only.
spacing	exact	Parsed: auto or exact; rendering implements exact only.

Note: The parser accepts x, y, dx, dy, and rotate on <textPath> for DOM fidelity, but text layout intentionally ignores those attributes on the <textPath> element itself, matching the SVG text model. Apply positioning to the parent <text> or nested <tspan> content instead.