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

これを読んでいる他の誰かが何か明示的なことを望んでいる場合に備えて、乗算するだけです（そして、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 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

rotate_transform_matrix上記のSwarnendu Paul に興味がある人は、次のようになります。

 _                                               _
| 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 マトリックス変換に使用しました。