Center textPath使文本上下颠倒

Question

我试图垂直和水平居中的弧路径内的文本，但在添加startOffset="50%"后，它颠倒了。

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>

我修复了方向问题，但现在我需要在圆弧内垂直居中。

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

固定!

我用<tspan dy="25%">包装了所有的<a>标签。

Answer 1

我认为，问题是你的path开始在较低的中心。如果它从右上角的中心开始，你的代码就可以工作了。

但是你可以将textPath分成两部分并定义startOffset:

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>