SVG旋转和缩放：如何更改旋转/缩放中心？

Question

我正在使用Raphael.js来旋转和缩放图像。而且我知道（希望我没记错）默认情况下，旋转和缩放的轴心点与图像中心是一样的。 如何更改枢轴点的位置，以便将来进行所有转换？

换句话说，如何修改旋转/缩放中心，以便image.transform("s2,5r20")之类的方法调用可以与该点相关而不是默认点？

Answer 1

实际上，我一直觉得有必要为你描述的行为手动指定枢轴点。

给定元素el，使用scale指令的可选第3和第4个参数来指定要缩放的点：

var bbox = el.getBBox();
el.transform( [ "S", "2.0", "2.0", bbox.x + bbox.width / 2, bbox.y + bbox.height / 2 ] );

同样，对于rotate指令，使用可选的2nd和3rd参数用于相同的目的：

var bbox = el.getBBox();
el.transform( [ "R", 45, bbox.x + bbox.width / 2, bbox.y + bbox.height / 2 ] );

显然，最好将此功能包装到效用函数或Raphael扩展中。但这将使您实现您正在寻求的目标。

Answer 2

文档包含example：

ar el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");