apike.ca

Text on a Path (textPath)

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

<textPath>
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)
1
2
3
4
5
6
<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.
Related Topics