svg text on path

9.8 Text on a path

To display text on a path:

define a path with id
enclose the text in a textPath

Example 1. Text centered along the path with path shown

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
   <defs>
       <path id="curvepath" 
          d="M 10 50 Q 50 10 100 50 T 190 50" style="stroke:#ddd; stroke-width:2; fill:none"/>
   </defs>
   <use xlink:href="#curvepath"/>
   <text >               
      <textPath xlink:href="#curvepath" 
                startOffset="50%" text-anchor="middle">
                Quadratic Bezier curve
      </textPath>
   </text>
</svg>

Example 2. Text with adjusted length to the path

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
   <use xlink:href="#curvepath"/>
   <text textLength="200" lengthAdjust="spacing">               
      <textPath xlink:href="#curvepath">
                Quadratic Bezier curve
      </textPath>
   </text>
</svg>