'How do I center text along an SVG curve?

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>
csssvg


Solution 1:[1]

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>

Solution 2:[2]

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 enxaneta
Solution 2 Suresh Suthar

Related Questions