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

Question

如果存在具有默认枢轴点（0,0）的svg旋转（度），那么我可以将旋转变换矩阵计算为

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

但是如果枢轴点不是（0,0），让我们说（px，py）那么我如何计算旋转变换矩阵？

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

Answer 2

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

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

得到 TransformMatrix。

Answer 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是函数。

Answer 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 矩阵变换。