How do I center text along an svg curve-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

#svg{
  margin: 300px;
  margin-top: 20px;
}

<svg width="100" height="25" 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>