How to calculate rotation / scaling coordinates for SVG transforms (I use Raphael.js)?

Question

I am having serious problems understanding how to calculate rotation / scaling coordinates (like pivot points) for SVG transformations using Raphael.js. In short, if you apply a transformation, such as image.transform("S1.5R45") , the transforms apply to the default rotation and scale scaling, which I'm not sure how to calculate.

To demonstrate, I put together a fiddle ( jsfiddle.net/GVEqf/ ), where the goal is to have exactly the same result in both viewports, for several transformations on the image object. In the first viewport, I do not indicate the pivot point, but in the second I do. However, I cannot get the same results. I need to enter rotation coordinates for the second viewport so that the output is identical to the first case.

Please, help.

Answer 1

If not specified, the axis is the center of the element. Here you need to take care of the position that you applied to the images and the scaling that will be performed. Since in this case your scaling is relative to the upper left corner of the image, we can simply multiply the center coordinate by it.

 // Compute rotation pivot coordinates var scaling = 1.5; rx = (x + (img_width / 2)) * scaling; ry = (y + (img_height / 2)) * scaling; // Apply transformations image1.transform("S1.5,1.5,0,0R45"); image2.transform("S1.5,1.5,0,0R45,"+rx+","+ry); 

http://jsfiddle.net/TYCJ7/