在 SVG 中模拟围绕枢轴的旋转

Question

我正在尝试在 SVG 组元素上模拟枢轴旋转（围绕特定点而不是围绕其中心旋转元素）。

我手头只有 2 个工具：

一个函数，可以将元素逐步移动到x-y方向。我们称之为 moveElement(x,y);
另一个可以围绕它的中心旋转元素的函数脚步。我们称之为 setRotationAngle(angle);

我试过用下面的公式来做，但没有用。

setRotationAngle(angle)
step_x = cos(angle) * (element.x - x) - sin(angle) * (element.y - y)
step_y = sin(angle) * (element.x - x) + cos(angle) * (element.y - y)
moveElement( step_x, step_y)

我知道这可以使用规范中已经存在的变换中心旋转来完成，但不幸的是我不能使用它们，因为我不想更改元素的变换中心。

如果可能的话，我希望仅使用上述功能来完成此操作。

Answer 1

一般情况下，您需要做的是：

moveElement(-centerX, -centerY);
rotateElement(angle);
moveElement(centerX, centerY);

在 SVG 中模拟围绕枢轴的旋转

Emulating rotations around pivot in SVG

math

svg

computational-geometry