CODEWITHSUNDEEP
csssvg
marcelo2605
marcelo2605

Reputation: 2794

Center textPath make text upside down

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%">.

Upvotes: 1

Views: 150

Answers (1)

biberman
biberman

Reputation: 5767

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>

Upvotes: 1

Related Questions