SVG — Text & textPath

SVG text is real, selectable, accessible text — positioned in the coordinate system. Anchor it, then flow it along a curve with <textPath>.

1 · positioning & text-anchor

The x,y is the text's baseline origin. text-anchor decides whether that point is the start, middle, or end of the text.

150
80
28
Live markup

        

The crosshair marks (x,y). Watch how start/middle/end slides the text relative to that fixed point.

2 · text on a path

Wrap text in <textPath href="#curve"> and it rides the curve. startOffset shifts where it begins along the path length.

50
0%
Live markup

        

The path is drawn faint here so you can see it, but in production set its stroke="none" — the text is all you ship.