SVG旋转变换矩阵

Question

我从SVG文件中的一个元素解析了一个转换属性，类似rotate(45,30,50)，我希望将它转换为矩阵形式。 我搜索了它，我找到的所有内容仅适用于rotate(a)，没有坐标，看起来像[cos(a) sin(a) -sin(a) cos(a) 0 0]

任何人都可以向我展示如何将rotate(angle, x , y)转换为矩阵形式吗？

Answer 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

Answer 2

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

Answer 3

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

检查此问题的答案

how to calculate svg transform matrix from rotation with pivot point