How to calculate svg conversion matrix from pivot with pivot point

Question

If there is a rotation svg (a deg) with a default rotation point (0,0), then I can calculate the rotation transformation matrix as

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

But if the pivot point is not (0,0), then let's say (px, py), then how to calculate the rotation transformation matrix?

Answer 1

I got ans,

Allows pivot point (px, py) , and rotation degree then the network transformation matrix will be

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

You can use javascript to apply the rotation conversion of the svg element:

 var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute('transform', 'rotate(-30 50 50)'); rect.getCTM(); 

to get the TransformMatrix.

Answer 3

Just multiplying (and removing the result to use the same variable names as the W3C), if anyone else is reading this, wants something explicitly.

 rotate(a, cx, cy) 

equivalently

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

The use of mathematical notation involving rotate and matrix are functions.