如何计算SVG变换的旋转/缩放轴坐标（我正在使用Raphael.js）？

Question

我很难理解如何使用Raphael.js计算 SVG变换的旋转/缩放枢轴坐标（例如旋转点）。 简而言之，如果应用诸如image.transform("S1.5R45")之类的变换，则转换将应用于默认的旋转和缩放轴，我不知道如何计算。

举个例子，我把一个小提琴（ jsfiddle.net/GVEqf/ ）放在一起，其目的是在两个视口中具有完全相同的输出，用于图像对象上的几个变换。 在第一个视口中，我没有指定旋转点，但在第二个视口中我没有指定旋转点。 但是，我无法得到相同的结果。 我需要输入第二个视口的旋转坐标，以便输出与第一个视口相同。

请帮忙。

Answer 1

未指定时，pivot是元素的中心。 在这里，您必须注意已应用于图像的位置以及将要完成的缩放。 因为在这种情况下，您的缩放是相对于图像的左上角，我们可以将中心坐标乘以它。

// Compute rotation pivot coordinates
var scaling = 1.5;
rx = (x + (img_width / 2)) * scaling;
ry = (y + (img_height / 2)) * scaling;

// Apply transformations
image1.transform("S1.5,1.5,0,0R45");
image2.transform("S1.5,1.5,0,0R45,"+rx+","+ry);

http://jsfiddle.net/TYCJ7/