How to Center Text inside an SVG Path

css svg cycle

j leos · Jul 1, 2017 · Viewed 12.3k times · Source

I need some help, when I use svg to draw a cycle and put some text, how to Center Text inside an SVG Path

Answer

You are part of the way there, but you have made a few mistakes.

text-anchor="center" is wrong. It should be text-anchor="middle".

In addition, you should add startOffset="50%" to the <textPath> element to specify that the text should be centred on the half-way point of the path.

Finally you need to fix the path itself. You need to remove the Z path command at the end of the path description. You only want the arc, not the return line back to the start of the arc.

<svg height="500"width="500">
 
  <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>
  <defs>
    <path id="p1" d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997" fill="#ddd" stroke="#ddd"></path>
  </defs>
  <text style="font-size: 24px;">
    <textPath xlink:href="#p1" startOffset="50%" text-anchor="middle">1test text</textPath>
  </text>
  
</svg>

How to Center Text inside an SVG Path

Answer

Related questions