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

Question

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

试图得到这个👇

而是得到这个👇

这是 codepen https://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)