SVG负角度旋转问题咨询：红线绕绿圆旋转异常排查

我来帮你梳理下问题所在，以及如何实现你想要的红线绕绿圆旋转的效果。

问题根源：SVG变换的执行顺序 #

你当前的代码里，transform="translate(256, 256) rotate(0, 80, 80)" 存在一个常见的SVG变换误区：SVG的变换是从右到左依次执行的，也就是说实际执行顺序是：

1. 先以(80,80)为中心执行rotate(0)
2. 再把整个图形平移(256,256)

这就导致绿圆的实际位置偏离预期，旋转中心也错位，进而可能出现旋转方向异常（看起来像负角度旋转）或者位置偏移的情况。

修正方案：调整变换顺序 + 明确旋转中心 #

要实现红线绕绿圆旋转，核心是让旋转中心精准落在绿圆的圆心位置。正确的做法是拆分变换步骤，先固定绿圆的位置，再以其圆心为中心旋转整个图形组：

修正后的0度代码 #

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
  <!-- 先将组平移到画布中心，让后续的坐标计算更直观 -->
  <g transform="translate(256, 256)">
    <!-- 以绿圆圆心(80,80)为中心旋转，此时该点相对于组的原点就是(80,80) -->
    <g transform="rotate(0, 80, 80)">
      <circle r="70" cx="80" cy="80" fill="#6fdb6f" />
      <!-- 红线从绿圆右侧边缘（80+70=150）延伸到外部，贴合视觉需求 -->
      <line x1="150" y1="80" x2="256" y2="80" style="stroke:rgb(255,0,0);stroke-width:2" />
    </g>
  </g>
</svg>

90度效果的代码示例 #

只需把rotate(0, 80, 80)改成rotate(90, 80, 80)，红线就会绕绿圆圆心顺时针旋转90度：

<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(256, 256)">
    <g transform="rotate(90, 80, 80)">
      <circle r="70" cx="80" cy="80" fill="#6fdb6f" />
      <line x1="150" y1="80" x2="256" y2="80" style="stroke:rgb(255,0,0);stroke-width:2" />
    </g>
  </g>
</svg>

额外说明：旋转方向 #

SVG里rotate(angle, cx, cy)的角度规则是顺时针为正，如果之前你的效果看起来像负角度旋转，本质就是变换顺序颠倒导致的视觉方向错位，调整顺序后就能恢复正常的顺时针旋转逻辑。如果需要逆时针旋转，传入负角度即可，比如rotate(-90, 80, 80)。

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