SVG text-path direction change on a half circle element

user_7158406 0
Viewed 241

I am trying to get a text-path inside of an SVG to follow the half circle, but i can't get it to start at the correct point.

It's implemented in my project like this

<svg viewBox="0 0 500 500">
  <path fill="transparent" id="curve" d=" M 400 0 A 200 197 0 1 1 400 -7" />
  <text x="6" width="500">
    <a href='https://google.com'><textPath href="#curve">
      Test text direction
      </textPath></a>
  </text>
</svg>

Please check this image https://ibb.co/cv6vWZG to see what i try to get and what i'm getting. The white text is what i'm looking for and the black text is what i'm getting

reactjs svg path css text
1 Answers

enter image description here

The text - Test text direction is located on the curve from the beginning in the path formula pointed to by the M(move) command. To change the starting point of the text location, you need to swap the beginning and end of the curve.

It was:

d=" M 400 0 A 200 197 0 1 1 400 -7"

It became:

d=" M 0 0 A 200 200 0 0 0 400 0"

<tspan dy="-5" adjusts the text distance from the curve

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
            <textPath   xlink:href="#curve">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
        </text> 
      </a>
</svg>

Adjustment of text location from the beginning of the curve - startOffset="40%"

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
                <textPath   xlink:href="#curve" startOffset="40%">
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
            </text> 
      </a>
</svg>

Update

Is there a better way to center the text to center of the curve than guess 40% ?

Add startOffset="50%" text-anchor="middle"

<svg viewBox="0 0 500 500">
            <path fill="transparent" stroke="black" id="curve" d=" M 0 0 A 200 200 0 0 0 400 0" />
      <a href='https://google.com'>
            <text x="6"  >
                <textPath   xlink:href="#curve" startOffset="50%"  text-anchor="middle" >
                  <tspan dy="-5">Test text direction </tspan>
                </textPath>
            </text> 
      </a>
</svg>

user_73948710
Related