SVG 'textpath' element

The <textpath> element is used to place text along a <path> element. Letters are rotated to stand perpendicular to the curve. The <textpath> element has the folowwing attributes:

  • startOffset attribute sets the initial current text position from the start of the <path> The defaul value is '0'. can not be negative.
  • method attribute sets the method by which text should be rendered along the path. The attribute has two values: align and stretch. See the W3C SVG 1.1. Recommendation for more information about the attribute's usage.
  • spacing attribute indicates how the spacing between glyphs to be rendered along a path is determined. The attribute has two values: auto and exact. See the W3C SVG 1.1. Recommendation for more information about the attribute's usage.
  • xlink:href attribute references to the <path> element onto which the glyphs will be rendered. The <path> element should be defined previously. Otherwise (if the <path> is not defined), the code><textpath> element will not be rendered.

Here are simple examples:
Example 1

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<defs>
<path id="path1" d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"/>
</defs>

<text font-size="18" text-anchor="middle" fill="#9d1d20">

<textPath xlink:href="#path1" startOffset="50%">
Text on a curved path
</textPath>

</text>

</svg>

Example 2

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<defs>
<path id="path2" d="M50 50 L 50 50 A 30 30 0 0 1 130 80 L 130 130"/>
</defs>

<text font-size="18" text-anchor="middle" fill="#9d1d20">

<textPath xlink:href="#path2" startOffset="50%">
Text on a round corner
</textPath>

</text>

<!-- a subsidiary path to show how the text is drawn -->
<path d="M50 50 L 50 50 A 30 30 0 0 1 130 80 L 130 130" stroke="grey"
stroke-width="1pt" fill="none"/>

</svg>

Here are the resulting images: