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	How glyphs are placed: align or stretch
side	left	Which side of the path: left or right
spacing	exact	Spacing control: auto or exact