居中 textPath 使文本上下颠倒答案

【问题标题】：Center textPath make text upside down居中 textPath 使文本上下颠倒
【发布时间】：2021-12-02 19:18:18
【问题描述】：

我试图在弧形路径内垂直和水平居中文本，但添加 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?editors=1100

已修复！

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

【问题讨论】：

如果文本不在路径中：只需反转绘制路径的方向即可。如果这样做，文本将位于行的另一侧。

标签： css svg

【解决方案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>

【讨论】：