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

Question

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

为了举例说明，我制作了一个fiddle（jsfiddle.net/GVEqf/），其目的是在图像对象上进行一些变换，使两个视口的输出完全相同。在第一个视口中，我没有指定旋转点，但在第二个视口中我指定了。然而，我无法获得相同的结果。我需要输入第二个视口的旋转坐标，以便输出与第一种情况相同。

请帮忙。

- Andrei Oniga

---

我不太明白这个问题。您想知道指定哪个旋转点可以得到与未指定相同的结果吗？ - Qnan

Answer 1

如果没有指定中心点，那么默认为元素的中心。

在这里，您需要注意应用于图像的位置和将要进行的缩放。由于在这种情况下，缩放相对于图像的左上角进行，因此我们可以通过它来乘以中心坐标。

// 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/

- Joan Charmant

---

这正是我一直在寻找的答案，而且是我已经寻找了一段时间的东西。谢谢！ - Andrei Oniga

我遇到了很多麻烦。在我构建的应用程序中，用户有可能将他们添加到视口（例如图像，如示例中的）的对象进行无限次缩放/旋转。但我意识到我无法将对象重置为其初始状态，以便在不与上一个对象重叠的情况下应用不同的变换。这意味着，在最后一个变换（在示例中）之后，如果我重复相同的代码序列，则对象的位置和方面会发生变化。为什么会这样，我该怎么解决？请帮忙。 - Andrei Oniga

我在另一个话题上提到了这个问题：stackoverflow.com/questions/13107528/how-to-reset-svg-transformations。如果你有时间，我真的很感激你对此的意见，我已经为此苦恼了两个星期了。 - Andrei Oniga