Home/ Questions/Q 8921295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T06:30:14+00:00

How do I make the text on a path ( see screenshot ) extend

  • 0

How do I make the text on a path (see screenshot) extend so that it follows the entire textPath?

I have tried using the method attribute value stretch but it doesn’t work like I expect – it doesn’t stretch the text along the path.

Is there a way to make this work in all browsers?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way to spread out the text over the entire textPath is to use the textLength attribute. Also see this other question for how to compute a good value for textLength. Here’s how to do it:

    <svg viewBox="0 0 500 300" version="1.1">
     <defs>
         <path id="s3" d="M 10,90 Q 100,15 200,70" />
     </defs>
     <text font-size="20">
         <textPath xlink:href="#s3" textLength="205">
           Short text
         </textPath>
     </text>
     <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
 </svg>

    Viewable example: http://jsfiddle.net/zkZ2n/

    enter image description here

    Here’s the bugreport for Firefox not supporting textLength: https://bugzilla.mozilla.org/show_bug.cgi?id=569722

    • 0