如何反转 SVG 文本路径，使文本不会颠倒？

Question

我不知道如何使用 javascript 绘制 svg 路径，因此文本不会颠倒。我想它应该被淹没在相反的方向，但我有点挣扎，所以非常感谢你的帮助。

试图得到这个????

但是得到这个 ????

这里是codepenhttps://codepen.io/Arneric/pen/yLboapr的链接以及我用来生成路径的函数：

const setPath = (cx, cy, r, deg) => {
  let theta = deg*Math.PI/180,
      dx = -r*Math.cos(theta),
      dy = r*Math.sin(theta)

  return `M ${cx} ${cy}
          m ${dx} ${dy}
          a ${r},${r} 0 1,0 ${-2*dx}, ${-2*dy}
          a ${r}, ${r} 0 1,0 ${2*dx},${2*dy}`
}

如果有人能更新这个函数就完美了，这样我们就能得到想要的结果。谢谢！

Answer 1

我所做的更改：

1. 我已将弧的扫描标志从 0 更改为 1
2. 对于 setPath，我使用 deg = 90 而不是 0，我正在删除 transform: rotate(90deg)。或者，您可以使用 deg = 180 的转换

另外，我将半径 r 更改为更小的值，否则文本将绘制在 svg 画布之外。您可以选择不同的 viewBox

const setPath = (cx, cy, r, deg) => {
  let theta = deg*Math.PI/180,
      dx = -r*Math.cos(theta),
      dy = r*Math.sin(theta)

  return `M ${cx+dx} ${cy+dy}
          
          a ${r},${r} 0 1,1 ${-2*dx}, ${-2*dy}
          a ${r}, ${r} 0 1,1 ${2*dx},${2*dy}`
}

let path = document.getElementById("circle-path");
path.setAttribute("d", setPath(100,100,70,90))

svg{
  font-size:10px;
  width: 600px;
  height: 600px;
  
}

<svg viewBox="0 0 200 200">

    <path stroke='red'
          fill="none"
          id='circle-path'
          d=''></path>
    
  <text 
  ref='big'
  class='text big-text text-uppercase'>
    <textPath text-anchor="middle"
              startOffset="50%"
              xlink:href="#circle-path">SOME TEXT THAT GOES ALONG THE CIRCLE PATH
    </textPath>
  </text>
</svg>

Answer 2

而不是这个：

  dx = -r*Math.cos(theta),
  dy = r*Math.sin(theta)

你可以用这个：

  dx = r*Math.cos(theta),
  dy = -r*Math.sin(theta)