1

What is the general formula for making a text path a circle in SVG?

That is given a radius 'r' in pixels what do you put in for the 'd' parameter of the path element - <path d = "

Here is a fiddle to test on:

http://jsfiddle.net/gfNT6/5/

<embed width="100" height="100" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="textPath" d="M50 50 C20 0 190 0 250 50"/>
    </defs>     
    <text fill="black" font-size = "12" font-family = "arial">
      <textPath id = 'test' xlink:href="#textPath">Text on a Path ... Text on a Path</textPath>
    </text>  
  </svg>
</embed>
  • d = 2r, A = PI*r^2, C = PI*d – imulsion Jun 03 '13 at 17:59
  • But how do you put that into `d = `. I'm not sure if you can use those parameters. –  Jun 03 '13 at 18:25
  • Try playing with this [SVG Arc demo](http://users.ecs.soton.ac.uk/rfp07r/interactive-svg-examples/arc.html), works with Chrome. – Alvin K. Jun 04 '13 at 05:39
  • I got it to work. But unfortunately, the text that follows the path is distorted. The application of text to the curve is shoddy. –  Jun 04 '13 at 13:40

1 Answers1

4

For a cubic bezier, the ratio is 4 * (sqrt(2) -1) / 3, or 0.5522847498. It is not hard to derive if you want a little mathematical brain teaser to work on.

So to create a circular arc, or complete circle, just step around the quadrants adding and subtracting that factor to the radius.

<path id="textPath"
       d="M 0,-1
          C 0.5523, -1   1, -0.5523    1,0
          C 1, 0.5523    0.5523, 1     0,1
          C -0.5523, 1   -1, 0.5523    -1,0
          C -1, -0.5523  -0.5523, -1   0,-1"
      stroke="blue" stroke-width="0.01" fill="none" transform="translate(150,150) scale(100,100)"/>

  <text fill="black" font-size = "12" font-family = "arial">
  <textPath id = 'test' xlink:href="#textPath">Text on a Path ... Text on a Path</textPath>
</text>

Fiddle here: http://jsfiddle.net/DP8pu/1/

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • if i use an image of text on a circular path instead of CSS (so that it is easily aligned, etc), is there some way to still appease the SEO gods? – oldboy Oct 19 '20 at 08:38
  • 1
    At the very least, make sure you have an `alt` or `title` attribute on your image. – Paul LeBeau Oct 20 '20 at 10:07