SVG: Circular text

Sometimes is needed circular text. Here is few examples how it can be done. All of them are working with a circular path with radius 100, then circumference is 628. The first example is going to create circular path from starting point A very close to the bottom circle and it ends on opposite side of the vertical axis point B. Let’s say that point A and B will be just 1 unit off the vertical axis, so they will be 2 units distant. The circle with radius 100 has circumference 628, but in this case we have to subtract distance AB, so path length is 628. Here is SVG code snippet:

<path id="path1" d="M0,0 m-1,100 a100,100 0 1,1  2,0 " style="fill:none;fill-opacity: 1;stroke:green;stroke-width: 1"/>
<text dy="12" dx="0" textLength="626">
  <textPath xlink:href="#path1">This text starts at bottom "6" and goes around</textPath>
R = 100 A B This text starts at bottom “6” and goes around

We can notice that end of the text is too close to the start. We can start with offset dx=”12″ and we should make textLength twice as much shorter to 628-2-12-12=602. And here is result:

R = 100 A B This text starts at bottom “6” and goes around

Now what if we would like the text outside of the circular path. Than offset y should be zero dy=”0″.

R = 100 A B This text starts at bottom “6” and goes around

Text almost around 360 degrees is not so easy to read. Solution can be to split text into two parts. Here is an example with SVG code snippet:

<path id="path1a" d="M0,0 m-70.7,70.7 a100,100 0 1,1  141.4,0 " style="fill:none;fill-opacity: 1;stroke:green;stroke-width: 1"></path>
<text dy="12" dx="0" textLength="471">
      <textPath xlink:href="#path1a">This is upper text and goes around circle</textPath>
<path id="path2a" d="M0,0 m-70.7,70.7 a100,100 0 0,0  141.4,0 " style="fill:none;fill-opacity: 1;stroke:red;stroke-width: 1"></path>
<text dy="-2" dx="5" textLength="147">
      <textPath xlink:href="#path2a">* Bottom text *</textPath>
R = 100 A B This is upper text and goes around circle * Bottom text *
This entry was posted in workday and tagged . Bookmark the permalink.

Leave a Reply