如何使用Raphael SVG围绕绝对中心旋转已平移的对象？

问题原因 #

Raphael中元素的translate()和rotate()操作基于变换矩阵累积实现，平移后元素的局部坐标系已偏移，手动计算的全局中心坐标（如你使用的160,160）无法匹配元素当前的变换状态，导致旋转结果不符合预期。另外元素的x/y属性不会随translate()更新，仍保留初始值，这也会干扰手动坐标计算。

解决方案 #

直接获取元素平移后的实际边界框，从中提取真实中心坐标，再以此为轴执行旋转操作。

修正代码示例 #

var paper = Raphael(canvas, c.width, c.height);
var circle = paper.rect(100,100,20,20);

// 执行平移操作
circle.translate(50,50);

// 获取元素平移后的实际边界框
var bbox = circle.getBBox();
// 计算当前元素的真实中心坐标
var centerX = bbox.x + bbox.width / 2;
var centerY = bbox.y + bbox.height / 2;

// 以真实中心旋转45度
circle.rotate(45, centerX, centerY);

另一种写法：用transform组合变换 #

如果需要更精确控制变换顺序，可直接用transform()方法一次性定义平移和旋转操作，避免变换累积带来的坐标混淆：

var paper = Raphael(canvas, c.width, c.height);
var circle = paper.rect(100,100,20,20);

// 先平移50,50，再绕目标中心旋转45度
circle.transform("t50,50 r45,160,160");

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