How do I center text along an SVG curve?

user_4437053 0
Viewed 141

Is there a way to center the text along a curve in SVG?

<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5"/>
    </defs>
    <text fill="#105ca6">
        <textPath style="alignment-baseline: baseline;" xlink:href="#intermediate">Intermediate</textPath>
    </text>
</svg>

svg css
2 Answers

First you need to use startOffset="50%". The startOffset attribute defines an offset from the start of the path for the initial current text position. This will make the text to start in the middle of the path.

Next you need to use text-anchor="middle" to align the text around the starting point which in this case is the middle of the path.

<svg width="100" height="25" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="intermediate" d="M 7 5 C 25 25, 75 25, 93 5" />
  </defs>
  <text fill="#105ca6">
    <textPath startOffset="50%" dominant-baseline="middle" text-anchor="middle" xlink:href="#intermediate">Intermediate</textPath>
  </text>
</svg>

user_78973950 

<div style="max-width:90px; margin:0 auto">
    <svg xmlns="http://www.w3.org/2000/svg" id="svg">
       <defs>
         <path id="intermediate" d="M 7 5 C 25 25, 75 25, 100 5"/>
       </defs>
       <text fill="#105ca6">
         <textPath style="alignment-baseline: baseline;" xlink:href="#intermediate">Intermediate</textPath></text>
     </svg>
</div>

user_182454440
Related