如何从带有枢轴点的旋转计算 SVG 变换矩阵

Question

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

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

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

Answer 1

我得到了ans，

让枢轴点是 （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();

以获得转换矩阵。

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