如何計算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/