Sams Teach Yourself SVG in 24 Hours

Text Along a Path

When desktop publishing tools first hit the mainstream market in the 1980s, applying gradients and wrapping text along a path were two of the hottest functions every designer wanted to play with. Twenty years have passed, and thankfully the desire to use these effects incessantly has waned. However, no self-respecting graphics tool or technology would be complete without the obligatory text-on-a-path function.

SVG doesn't let the graphics community down; text-on-a-path is handled by the textPath element. The textPath element is contained within the text element and references an outside path to render the text along. The syntax for the element

<textPath xlink:href=”#pathID”>…</textPath> 

requires that a path with an id value ...