如何计算 SVG 转换的旋转/缩放枢轴坐标（我使用的是 Raphael.js）？答案

【问题标题】：How to compute rotation/scale pivot coordinates for SVG transformations (I'm using Raphael.js)?如何计算 SVG 转换的旋转/缩放枢轴坐标（我使用的是 Raphael.js）？
【发布时间】：2012-10-17 11:59:28
【问题描述】：

我在理解如何使用 Raphael.js 计算 SVG 转换的旋转/缩放枢轴（例如旋转点）的坐标时遇到了严重的问题。简而言之，如果您应用诸如image.transform("S1.5R45") 之类的转换，则这些转换将相对于默认的旋转和缩放轴心应用，我不确定如何计算。

举例来说，我整理了一个小提琴 (jsfiddle.net/GVEqf/)，其目的是在两个视口中具有完全相同的输出，以便对图像对象进行几次转换。在第一个视口中，我没有指定旋转点，但在第二个视口中我指定了。但是，我无法得到相同的结果。我需要的是输入第二个视口的旋转坐标，以便输出与第一种情况相同。

请帮忙。

【问题讨论】：

我不太明白这个问题。您是否想知道指定哪个旋转点才能获得与未指定时相同的结果？

标签： javascript svg raphael

【解决方案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/

【讨论】：

正是我正在寻找的答案。还有一些我一直在寻找的东西。谢谢！
我遇到了很多麻烦。在我正在构建的应用程序中，用户可以无限次地缩放/旋转他们添加到视口中的对象（例如图像，就像小提琴中的那个）。而且我开始意识到我无法将对象重置为其初始状态，以便应用不同的转换而不与之前的转换重叠。这意味着在最后一次转换之后（在小提琴中），如果我重复相同的代码序列，对象的位置和方面会发生变化。为什么会这样，我该如何解决？请帮忙。
我打开了一个关于它的不同主题：stackoverflow.com/questions/13107528/how-to-reset-svg-transformations。如果您有时间，我非常感谢您对此的意见，我已经拔头发 2 周了。