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>
</text>
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:
Now what if we would like the text outside of the circular path. Than offset y should be zero dy=”0″.
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>
</text>
<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>
</text>