解析SVG时如何将transform: rotate(angle,x,y)转换为rotation、posX和posY

SVG里的rotate(angle, cx, cy)本质是三步复合变换，直接按以下步骤就能算出元素的新位置，不需要额外的持久化变量，只需要计算过程中的临时中间值：

核心逻辑 #

先把元素平移，让枢轴点(cx, cy)对齐坐标原点，绕原点旋转指定角度，再平移回枢轴点的原始位置。

具体计算步骤（以元素上任意一点(x, y)为例） #

• 计算相对枢轴点的坐标
  • 临时变量dx = x - cx
  • 临时变量dy = y - cy
• 角度转弧度
  三角函数依赖弧度值，转换公式：rad = angle * Math.PI / 180
• 应用旋转公式
  绕原点旋转的坐标变换公式：
  • new_dx = dx * Math.cos(rad) - dy * Math.sin(rad)
  • new_dy = dx * Math.sin(rad) + dy * Math.cos(rad)
• 转换回绝对坐标
  • new_x = cx + new_dx
  • new_y = cy + new_dy

需要的临时变量 #

整个计算过程只需要几个临时中间变量，无需额外存储：

• dx、dy：元素原始点相对于枢轴点的偏移量
• rad：转换后的弧度值
• new_dx、new_dy：旋转后的相对偏移量

示例验证 #

比如元素上一点(100, 100)，枢轴点(50, 50)，旋转90度：

• dx = 100-50 = 50，dy = 100-50 = 50
• rad = 90 * π/180 = π/2
• new_dx = 500 - 501 = -50
• new_dy = 501 + 500 = 50
• new_x = 50 + (-50) = 0，new_y = 50 + 50 = 100
  最终新位置为(0, 100)，符合视觉预期。

内容的提问来源于stack exchange，提问作者Johan Martin Aarstein