Svg draw circle with curved text inside
I need to draw a red cirle with two curved lines inside:
the top line is always 3 characters long the bottom line can be from 1 to 20 characters long
Update1: I am trying to use the textpath and circle tags, but I think I need to change some coordinates:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/>
<defs>
<path id="myTextPath"
d="M75,20
a1,1 0 0,0 150,0"
/>
</defs>
<text x="5" y="50" style="stroke: #000000;">
<textPath xlink:href="#myTextPath" >
string
</textPath>
</text>
</svg>
Also I didn't understand how I can understand the <path>
'd' atrribute, but I found that I can change the start point to M10,20
, but how can I change the orientation of the text curve?
d="M10,20 a1,1 0 0,0 150,0"
source to share
To make text that "hangs" from the line nicely, it is best to use a path with a smaller radius. There is an attribute to adjust the baseline of the text, but this does not work reliably.
So, you need two arcs. One for the bottom half of the circle and one with a smaller radius for the top half. They should also start from the left. This means one will go clockwise and the other will go counterclockwise. You control this with the "sweep" arc command.
We also need to use startOffset="50%"
and text-anchor="middle"
to center the text on the paths.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 80 80">
<defs>
<path id="tophalf" d="M26,40 a14,14 0 0,1 28,0" />
<path id="lowerhalf" d="M16,40 a24,24 0 0,0 48,0" />
</defs>
<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/>
<path d="M16,40 a24,24 0 0,0 48,0" style="stroke:#600; fill:none"/>
<text x="5" y="50" style="stroke: #000000;"
text-anchor="middle">
<textPath xlink:href="#tophalf" startOffset="50%">str</textPath>
</text>
<text x="5" y="50" style="stroke: #000000;"
text-anchor="middle">
<textPath xlink:href="#lowerhalf" startOffset="50%">second st</textPath>
</text>
</svg>
This works great in FF, but unfortunately it looks like there are bugs in Chrome and IE that cause the text to not center properly in those browsers.
source to share