3

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?

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
marksman
  • 68
  • 6
  • Do you mean to make the text fit all the way along the entire length of the path? Or are you talking about the `method` attribute, http://www.w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute? – Erik Dahlström Nov 26 '12 at 15:31
  • yes, I mean the method attribute - [link](http://www.w3.org/TR/SVG11/text.html#TextPathElementMethodAttribute) – marksman Nov 26 '12 at 16:06
  • here is screenshot [linlk](http://yadi.sk/d/Hcn85Jxh0unbg). My problem is I can't stretch by attribute method – marksman Nov 26 '12 at 16:39
  • Is it this effect you are after: http://jsfiddle.net/zkZ2n/? (Works in Opera and Chrome) – Erik Dahlström Nov 26 '12 at 16:57
  • Yes, this is what I wanted. But how does it reach for other browsers who support svg? – marksman Nov 26 '12 at 17:17

1 Answers1

4

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

Community
  • 1
  • 1
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Side note: With SVG 2 (implementation [in progress](https://chromestatus.com/feature/5760616295825408)) you can define whether the text is rendered inward or outward with the new [`side`](https://svgwg.org/svg2-draft/single-page.html#text-TextPathElementSideAttribute) attribute on the [`textPath`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath) element. – Mahozad May 06 '22 at 09:50