SVG rotation transformation 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 convert it to matrix form. I searched for it, and all I could find was just for rotate(a) without coordinates, which looks like this: [cos(a) sin(a) -sin(a) cos(a) 0 0]

can someone show me how to convert rotate(angle, x , y) form to matrix?

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 element's transformation matrix, including rotation, translation, and everything else.

Answer 2

Rotation matrices can only describe rotations around (0, 0), so you have to use translation.

EDIT See this JSFiddle . It draws a rectangle defined with an offset, width, and height rotated around a pivot point. The interesting part is the last 10 lines or so, where the values ​​for offsetX and offsetY are calculated. After that, you can build your translation and your rotation matrices. Then just multiply the translation by rotation, and you get the final result. Unfortunately, Javascript does not offer any matrix functionality, so if you do not provide your code, this is all I can do

HOW THE TRANSFER MATRIX IS MADE

 1 0 offsetX 0 1 offsetY 0 0 1 

HOW DOES THE ROTATION MATRIX

 cos -sin 0 sin cos 0 0 0 1 

Answer 3

To get the svg transformation matrix from pivot with pivot point,

check this question answer

how to calculate svg conversion matrix with rotation with pivot point