SVG旋转变换矩阵答案

【问题标题】：SVG rotate transform MatrixSVG旋转变换矩阵
【发布时间】：2012-03-14 12:15:59
【问题描述】：

我从 SVG 文件中的元素解析了一个变换属性，例如 rotate(45,30,50)，我想将其转换为矩阵形式。我搜索了它，我能找到的只是rotate(a)，没有坐标，看起来像这样[cos(a) sin(a) -sin(a) cos(a) 0 0]

谁能告诉我如何将rotate(angle, x , y) 转换为矩阵形式？

【问题讨论】：

标签： javascript matrix svg

【解决方案1】：

旋转矩阵只能描述围绕 (0, 0) 的旋转，因此您必须使用平移。

编辑见this JSFiddle。它绘制一个用偏移量、宽度和高度定义的矩形，围绕一个轴心点旋转。有趣的部分是最后 10 行左右，其中计算了 offsetX 和 offsetY 的值。一旦你有了这些，你就可以建立你的平移和旋转矩阵。然后，只需将平移乘以旋转，即可得到最终结果。不幸的是，Javascript 不提供任何矩阵功能，所以如果您不提供代码，我只能这样做

如何制作翻译矩阵

1   0   offsetX
0   1   offsetY
0   0      1

如何制作旋转矩阵

cos   -sin    0
sin    cos    0
 0      0     1

【讨论】：

添加翻译会移动元素，这不是我想要的。重点是，它使旋转发生在它周围，而不是围绕 (0,0) 元素已经到位，但需要围绕某个点旋转
我想知道他的意思是不是说净效果是一样的——通过围绕中心旋转然后偏移，你可以达到同样的效果吗？
净效果不一样。我想要的只是简单地获取变换矩阵，这样我就可以将它应用到形状上的某个点，如果我偏移形状（翻译它），我可以在不同的地方得到它的位置。我希望该点在同一个地方但围绕另一个点旋转
尽管您的解决方案似乎可行，但对我来说理解起来很复杂，我只需要一个函数，它需要一个点并围绕一个点旋转，返回该点的新位置或该解决方案的矩阵表示
@zeacuss 实际上我的代码中唯一的复杂部分是最后 10 行，我在其中展示了如何计算 O' 的坐标，即 O(0, 0) 旋转关于枢轴点P(x, x)。只需考虑一个新的坐标空间，其中任意点 A(xA, yA) 变为 (0, 0)，您就可以轻松地使我的代码适应您的需求

【解决方案2】：

我找到了一种更简单的方法来获取 SVG 元素的转换矩阵。使用SVG元素getCTM()方法我可以得到元素的变换矩阵，包括旋转、平移等等。

【讨论】：

【解决方案3】：

要从带有枢轴点的旋转中获取 svg 变换矩阵，

检查这个问题的答案

how to calculate svg transform matrix from rotation with pivot point

【讨论】：