如何通过枢轴点旋转计算svg变换矩阵答案

【问题标题】：how to calculate svg transform matrix from rotation with pivot point如何通过枢轴点旋转计算svg变换矩阵
【发布时间】：2013-01-17 14:54:27
【问题描述】：

如果有一个带有默认枢轴点（0,0）的svg旋转（a deg），那么我可以将旋转变换矩阵计算为

 _                    _
| cos a   -sin a   0   |
| sin a    cos a   0   |
|   0       0      1   |
 -                    -

但是如果轴心点不是 (0,0)，假设是 (px,py) 那么我该如何计算旋转变换矩阵呢？

【问题讨论】：

我已经回答了我的问题，如果您有任何不同的答案，请发布您的答案。

标签： matrix svg svg-animate

【解决方案1】：

我知道答案了，

让轴心点为(px ,py)，旋转为度数那么网络变换矩阵将是

                   _          _        _                      _    
                  |   1  0  px |      |   cos a    -sin a   0  |   
    net_matrix =  |   0  1  py |  X   |   sin a     cos a   0  |   
                  |   0  0  1  |      |     0         0     1  |   
                   -          -        -                      -    

                                               _             _
                                              |   1   0   -px |
    rotate_transform_matrix =  net_matrix  X  |   0   1   -py |
                                              |   0   0     1 |
                                               -             -

【讨论】：

【解决方案2】：

您可以使用 javascript 对 svg 元素应用旋转变换：

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('transform', 'rotate(-30 50 50)');
rect.getCTM();

获取 TransformMatrix。

【讨论】：

【解决方案3】：

只需乘以（并整理结果以使用与 W3C 相同的变量名称），以防其他阅读本文的人想要明确的东西。

rotate(a, cx, cy)

等价于

matrix(cos(a), sin(a), -sin(a), cos(a), cx(1 - cos(a)) + cy(sin(a)), cy(1 - cos(a)) - cx(sin(a)))

使用数学符号假设 rotate 和 matrix 是函数。

【讨论】：

最后两个矩阵元素好像符号错误，应该是cx(1 - cos(a)) + cy(sin(a)), -cx(sin(a)) + cy(1 - cos(a))

【解决方案4】：

对于任何对上述 Swarnendu Paul rotate_transform_matrix 感兴趣的人，可以获得：

 _                                               _
| cos a   -sin a   px * (1 - cos a) + py * sin a  |
| sin a    cos a   py * (1 - cos a) - px * sin a  |
|   0        0                  1                 |
 ¯                                               ¯

我将它用于 SVG 矩阵变换。

【讨论】：