svg draw circle with curved text inside

debugcn Published at Dev

MeetJoeBlack

I need to draw red cirle with two curved string inside like that:

upper string always be 3 chars length lower string can be from 1 to 20 chars length

UPDATE1: I try to use 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 didnt clear understand <path> 'd' atrribute , but I found out that I can change starting point to M10,20 but how I can change text curve orientation?

d="M10,20 a1,1 0 0,0 150,0"

Paul LeBeau

To have text that "hangs" from a line nicely, the best way right now is to use a path with a smaller radius. There is an attribute to adjust the text's baseline, but that doesn't 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 also need to both start from the left. That means one will go clockwise, and the other will go anti-clockwise. You control that with the arc command's "sweep" flag.

We need to also use startOffset="50%" and text-anchor="middle" to centre 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 fine in FF, but unfortunately, it seems there are bugs in Chrome and IE right now that is causing the text to not be centred properly on those browsers.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-10

Comments

0 comments

From Dev

Related Related

Article