Menu

04 March 2009

how to center the text on textpath in SVG

You can display Text on Path in SVG. by using startOffset and text-anchor you can make centered text on textpath on svg.
Here is the code.

<svg width="12cm" height="3.6cm" viewbox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100">
</path>
<desc>Example toap01 - simple text on a path</desc>
<use href="#MyPath" fill="none" stroke="red">
<text family="Verdana" size="42.5" fill="blue">
<textpath anchor="middle" startoffset="50%" href="#MyPath">
This is what you want
</textpath>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" height="298" fill="none" stroke="blue" width="998">
</rect>
</use></defs></svg>
Post a Comment