SVG实现Y轴方向半圆时如何避免文本显示错乱？

旋转path路径会连带改变文本的排版方向，导致显示错乱。直接定义垂直方向的半圆路径，就能避免这个问题，实现目标效果：

<svg
  height="300px"
  width="300px"
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    id="txt"
    fill="none"
    stroke="blue"
    d="M50 80 A10 10, 0, 0, 1, 50 20"
  ></path>
  <text>
    <textPath href="#txt" startOffset="50%" text-anchor="middle">prepare yourself</text>
  </text>
</svg>

修改要点： #

• 移除transform="rotate(90, 50 50)"，直接通过d属性构造垂直圆弧：M50 80 A10 10, 0, 0, 1, 50 20，该路径以(50,50)为圆心、10为半径，从下方(50,80)延伸至上方(50,20)，形成右侧半圆。
• 将fill="blue"改为fill="none" stroke="blue"，避免填充色遮挡文本，同时保留路径边框便于查看。
• 添加startOffset="50%" text-anchor="middle"，让文本在圆弧中间位置居中对齐，匹配目标效果。

如果需要调整文本朝向或半圆位置，可修改圆弧参数：比如把0 0 1改为0 0 0，会生成左侧半圆，文本方向也会相应改变。

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