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

Question

如果有一个默认中心点为（0,0）的SVG旋转（a deg），那么我可以计算出旋转变换矩阵，如下所示：

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

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

- Scarecrow

---

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

Answer 1

我得到了答案，假设旋转中心点为(px, py)，旋转角度为a度，那么最终的变换矩阵将是：

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

- Scarecrow

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。

- user2065682

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 是函数，使用数学符号表示。

- Francis Davey

---

看起来最后两个矩阵元素的符号是错误的，应该是 cx(1 - cos(a)) + cy(sin(a)), -cx(sin(a)) + cy(1 - cos(a))。 - knabar

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

- Fahad Alrashed