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

Question

我正在使用 Raphael.js 来旋转和缩放图像。而且我知道（希望我没有弄错）默认情况下，旋转和缩放的轴心点与图像中心相同。我怎样才能改变轴心点的位置，以便所有未来的转换都会发生在它身上？

换句话说，我怎样才能修改旋转/缩放中心，以便方法调用如image.transform("s2,5r20")将与该点而不是默认点相关？

Answer 1

实际上，我一直认为有必要为您所描述的行为手动指定枢轴点。

给定一个 element el，使用 scale 指令的可选第三个和第四个参数来指定要缩放的点：

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

该文档有示例：

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