CODEWITHSUNDEEP
csssvg
Steve Lloyd
Steve Lloyd

Reputation: 949

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>

Upvotes: 3

Views: 1521

Answers (2)

enxaneta
enxaneta

Reputation: 33024

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>

Upvotes: 10

Suresh Suthar
Suresh Suthar

Reputation: 83

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

Upvotes: 0

Related Questions