SVG textpath element

Jakob Jenkov
Last update: 2014-06-15

The SVG <textpath> element is used to layout text along a path, for instance in a circle. This can look cool. There is a slight difference between how the different browsers render the text along the path, so be sure to check how your text looks in all the browsers you plan to support.

Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">


    <defs>
        <path id="myTextPath"
              d="M75,20
                 a1,1 0 0,0 100,0
               "
                />
    </defs>

    <text x="10" y="100" style="stroke: #000000;">
      <textPath xlink:href="#myTextPath" >
            Text along a curved path...
      </textPath>
    </text>

</svg>

And here is the resulting image:

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

If the length of the path is shorter than the length of the text, then only the part of the text that is within the extend of the path is drawn.

You can also use more advanced paths. Here is a more complex text path example:

<defs>
    <path id="myTextPath2"
          d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>

<text x="10" y="100" style="stroke: #000000;">
    <textPath xlink:href="#myTextPath2">
        Text along a more advanced path with lines and curves.
    </textPath>
</text>

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

Here is the resulting image:

Next: SVG switch element

Tweet
	Jakob Jenkov