Text : relationship with paths

A text can be forced to follow a path predefined by a tag <path>
<textPath starOffset="lengthpercentage" xlink:href="uri" />
starOffset is the offset compared to the beginning of the text

a length is a distance measured along the path in the user space metric

a percentage is a percentage compared to the whole path in the user space metric

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300">
<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" />
</defs>
<desc>Example toap01 - simple text on a path</desc>

<use xlink:href="#MyPath" style="stroke:red" />
<text style="font-family:Verdana; font-size:42.3333; fill:blue">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
</text>
</svg>

Didier Courtaud
The SVG language
Novembre 2001

47 / 74