SVG <textPath> Element

The SVG <textpath> element is used to arrange text along a path (such as, a circle), creating a cool effect. Different browsers may render text along the path slightly differently, so make sure to check the appearance of the text in supported browsers.

Online Example

<svg     width="500" height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1　0 0,0　100,0"　/>　　　　
</defs>　　　　
<text x="20" y="80" style="stroke: #000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com Basic Tutorial.../textPath>　　　　
</text>　　　　
</svg>

Image effect after running:

Note how the <path> element (inside the <defs> element) has an id attribute. This id attribute value is referenced by the xlink:href attribute of the <textpath>.

If the path is shorter than the text, only the part of the text within the path extension range is drawn.

You can also use more advanced paths. This is an example of a more complex text path:

<svg width="500" height="200">
　　　　<defs>
　　　　　　　　<path id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20 l100,0 l100,30 q0,100　150,100"/>
　　　　</defs>
　　　　<text x="20" y="40" style="stroke: #000000;">
　　　　　　　　<textPath xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com Basic Tutorial....
　　　　　　　　</textPath>
　　　　</text>
</svg>

This example defines a text path composed of a horizontal line, diagonal line, and curve.

Image effect after running: