如何計算從SVG旋轉變換矩陣與樞轉點

Question

如果有SVG旋轉（一度）具有默認樞軸點（0,0），那麼我可以計算旋轉變換矩陣作爲

_     _ 
| 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是功能。