SVG rotate transform Matrix

Question

I parsed a transform attribute from an element in an SVG file something like rotate(45,30,50) and I would like to transform it to matrix form. I searched for it and all I could found is only for rotate(a) with no coordinates which looks like this [cos(a) sin(a) -sin(a) cos(a) 0 0]

can any one show me how to transform the rotate(angle, x , y) to matrix form?

Answer 1

I found an easier way to get the transformation matrix of an SVG element. Using the SVG element getCTM() method I can get the transformation matrix of the element, including rotation, translation and everything else.

Answer 2

Rotation matrices can only describe rotations about (0, 0), so you'll have to use a translation.

EDIT See this JSFiddle. It draws a rectangle defined with an offset, width and height, rotated around a pivot point. The interesting part are the last 10 lines or so, where the value for offsetX and offsetY are computed. Once you have these, you can build your translation and your rotation matrices. Then, just multiply the translation by the rotation, and you'll get your final result. Unfortunately, Javascript doesn't offer any matrix functionality, so if you don't provide your code this is all I can do

HOW A TRANSLATION MATRIX IS MADE

1   0   offsetX
0   1   offsetY
0   0      1

HOW A ROTATION MATRIX IS MADE

cos   -sin    0
sin    cos    0
 0      0     1

Answer 3

To get svg transform matrix from a rotation with pivot point,

check this question answer

how to calculate svg transform matrix from rotation with pivot point