Text on a Path (textPath)

By mbystedt on Feb 24, 2014, 9:28:20 PM

Placing text on a path is accomplished by defining a path and inside a 'text' element using a 'textPath' element to reference the path.

Attribute	Values	Initial	Comments
startOffset	length	0	The distance along the path or a percentage.
method	(align \| stretch)	align	Align preserves the shape of the letters. Stretch warps the letters to match the path's curve. Note: stretch is not well supported.
spacing	(auto \| exact)	exact	Auto is a hint to the SVG viewer to preserve the visual look of letters over the exact spacing.
xlink:href	#ref		A reference to the path. Invalid references cause the text to not display.

Example 1. Text on a path. The path is shown in red. (Download)

<defs>
  <path id="path1" d="M25, 100 C10,10 175,10 175,100" />
</defs>
<text font-size="19.5" fill="blue">
  <textPath xlink:href="#path1">Hello text-on-a-path world!</textPath>
</text>

Code 1. The path used in the above example.