Apply transformation matrix around the center of an element

Question

I am using Raphael to make some manipulations in SVG. In order to save the SVG as image i use Canvg to render the SVG in canvas. But the transformations of images inside the SVG rendered in canvas is not right. Canvg uses native transform() method of html5 to apply the transformations using the below code in line 571 of Canvg.

ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);

But this results in transformations like rotations and scaling done around the origin of the image. But in Raphael the transformations are applied around the center of the image.

So is it possible to apply transformations so everything happens around center of the image?

Answer 1

You can make your own function that makes transformations happen around the center of the image given the image's center points.

The theory around making things transform by its center is as follows :

1. Translate the image by <-X,-Y,-Z>, where (X,Y,Z) is the image's center.
2. Do the transformation you want to do
3. Translate the image by <X,Y,Z>. (You're just returning it back to its original position now)