在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);