Center textPath make text upside down

user_3691686 0
Viewed 60

I'm trying to center vertically and horizontally a text inside an arc path but after add startOffset="50%", it turned upside down.

text a {
  margin: 0;
  font-size: 42px;
  text-align: center;
  font-family: sans-serif;
  fill: #FF9800;
}
<svg viewBox="0 0 1277 224">
  <path id="curve" d="M640 224c347.406 0 640-142 640-142V0S995 142.5 640 142.5 0 0 0 0v82s292.595 142 640 142Z"></path>
  <text text-anchor="middle">
      <textPath xlink:href="#curve" startOffset="50%">
        <a xlink:href="#item-1">Item 1</a>
        <a xlink:href="#item-2">Item 2</a>
        <a xlink:href="#item-3">Item 3</a>
        <a xlink:href="#item-4">Item 4</a>
      </textPath>
    </text>
</svg>

Update

I fixed the orientation issue but now I need to center vertically the text inside the arc.

https://codepen.io/marcelo2605/pen/yLoNdeg?editors=1100

Fixed!

I wrapped all the <a> tags with <tspan dy="25%">.

svg css
1 Answers

I think, the problem is that your path begins in the lower center. If it would start in the upper center your code would work.

But you could split the textPath in two and define the startOffset different:

text a {
  margin: 0;
  font-size: 42px;
  text-align: center;
  font-family: sans-serif;
  fill: #FF9800;
}
<svg viewBox="0 0 1277 224">
  <path id="curve" d="M640 224c347.406 0 640-142 640-142V0S995 142.5 640 142.5 0 0 0 0v82s292.595 142 640 142Z"></path>
  <text text-anchor="middle">
      <textPath xlink:href="#curve" startOffset="96%">
        <a xlink:href="#item-1">Item 1</a>
        <a xlink:href="#item-2">Item 2</a>
      </textPath>
      <textPath xlink:href="#curve" startOffset="5%">
        <a xlink:href="#item-3">Item 3</a>
        <a xlink:href="#item-4">Item 4</a>
      </textPath>
    </text>
</svg>

user_153773550
Related