What is the purpose of the element?

To make text follow the curve of a predefined path

To turn a block of text into a hyperlink

To split a block of text into multiple columns

Which attribute links a to the path it should follow?

href, referencing the target path's id

path, containing the raw d-string directly

src, referencing an external SVG file

Where must a element be placed to work correctly?

Directly inside only, never inside

As a sibling of the path, anywhere in the SVG

Does the path referenced by need to be visibly drawn on screen?

No, it can be hidden in and still guide the text

Yes, the path's stroke must be visible for text to follow it

Yes, the path must have a fill color for the effect to work

SVG TextPath

Learn how the <textPath> element bends a line of text along the shape of any SVG path, from gentle arcs to full loops.

Text That Follows a Path

<textPath> is not a standalone tag but a child of <text>. It replaces straight-line rendering with a reference to a path (via the href attribute, or the older xlink:href), and each character is placed along that path's geometry in order, rotated to stay tangent to the curve.

Text Along a Simple Arc

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 260 120'>
  <path id='arc1' d='M 20 100 Q 130 10 240 100' fill='none' stroke='#cbd5e1'/>
  <text font-size='18' fill='#1d4ed8'>
    <textPath href='#arc1'>This text curves along the path above</textPath>
  </text>
</svg>

</body>
</html>

The path referenced by href must exist somewhere in the document, typically hidden or drawn faintly as a guide. startOffset shifts where along the path the text begins -- a percentage moves proportionally to the path's total length, while a plain number is an absolute distance in user units. This lets several text runs share one path without overlapping.

Full Circle with startOffset

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 200 200'>
  <path id='ring' d='M 100 20 A 80 80 0 1 1 99 20' fill='none' stroke='none'/>
  <text font-size='14' fill='#7c3aed'>
    <textPath href='#ring' startOffset='0%'>Around and around and around we go</textPath>
  </text>
</svg>

</body>
</html>

Note: Keep the guide path's stroke set to 'none' once you're happy with the curve -- the path only needs to exist for reference, it doesn't need to be visible itself.

Spacing, Alignment, and Reusing a Path

Two attributes fine-tune how text hugs its path: spacing controls whether glyphs snap to the path's exact curvature ('auto') or keep normal letter spacing ('exact'), and method chooses between simple positioning at each character's advance ('align') or a more precise arc-length calculation ('stretch'). Multiple <text><textPath> pairs can reference the very same path id, each with its own startOffset, so one curve can carry several independent labels.

href references the path this text should follow, e.g. '#arc1'
startOffset sets where along the path the text begins, in % or user units
spacing is 'auto' (default) or 'exact' character spacing
method is 'align' (default) or 'stretch' glyph placement
side is 'left' (default) or 'right' of the path direction

Two Labels Sharing One Path

<!DOCTYPE html>
<html>
<body>

<svg viewBox='0 0 260 140'>
  <path id='wave' d='M 10 100 C 70 20, 190 20, 250 100' fill='none' stroke='#e2e8f0'/>
  <text font-size='13' fill='#0f766e'>
    <textPath href='#wave' startOffset='2%'>Start</textPath>
  </text>
  <text font-size='13' fill='#b91c1c'>
    <textPath href='#wave' startOffset='80%'>Finish</textPath>
  </text>
</svg>

</body>
</html>

Note: textPath expects to reference a <path> element's id -- pointing href at a <circle>, <rect>, or other basic shape renders nothing in most browsers, so always draw the guide as an explicit <path> even for simple curves.

Attribute	Purpose
href	ID reference to the path the text should follow
startOffset	Starting position along the path (% or length units)
spacing	auto (snap to curvature) or exact (normal glyph spacing)
method	align or stretch glyph placement along the path
side	Which side of the path direction the text renders on

Exercise: SVG TextPath

What is the purpose of the <textPath> element?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVG Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to SVG and tweak your resume