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:

Text along a curved path...

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:

Text along a more advanced path with lines and curves.

Jakob Jenkov

Featured Videos

Java ForkJoinPool

P2P Networks Introduction




















Advertisements

High-Performance
Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next