如何用旋转点从旋转计算svg变换矩阵

Question

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

 _                    _
| 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();

获取TransformMatrix。

Answer 3

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

rotate(a, cx, cy)

相当于

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

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

Answer 4

对于任何对以上Swarnendu Paul rotate_transform_matrix感兴趣的人，都会得到：

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

我将其用于SVG矩阵转换。