SVG弧形路径内文本居中及startOffset导致文字倒置问题问询

问题背景 #

需求为实现SVG弧形路径内文本的水平与垂直双向居中，在添加startOffset="50%"属性后出现文本倒置问题。

相关代码 #

CSS样式 #

text a {
  margin: 0;
  font-size: 42px;
  text-align: center;
  font-family: sans-serif;
  fill: #FF9800;
}

SVG初始代码 #

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

问题进展 #

文本倒置问题已修复，剩余需求为实现文本在弧形内部的垂直居中。

最终解决方案 #

使用<tspan dy="25%">标签包裹所有<a>标签，即可完成垂直居中需求。

内容的提问来源于stack exchange，提问作者marcelo2605