SVG textpath element
Jakob Jenkov |
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:
| Tweet | |
Jakob Jenkov | |
