Simple SVG Matric Calculations


I spent ages trying to figure out how to do matrix calculations in order to finish off this work and eventually hit on this site which helped a lot, I also created a simple image in Inkscape and used the Dialogs -> Item Properties menu to check the transformations after each move of the image in the 4 by 4 grid shown above. All this because Matrix Calculations were starting to do my head in. Anyway, I hope that it helps someone.

No Flip Horizontal Flip Vertical Flip Horizontal & Vertical Flip
Rotation: (1,0,0,1,X,Y) (-1,0,0,1,X,Y) (1,0,0,-1,X,Y) (-1,0,0,-1,X,Y)
90° (0,1,-1,0,X,Y) (0,1,1,0,X,Y) (0,-1,-1,0,X,Y) (0,-1,1,0,X,Y)
180° (-1,0,0,-1,X,Y) (1,0,0,-1,X,Y) (-1,0,0,1,X,Y) (1,0,0,1,X,Y)
270° (0,-1,1,0,X,Y) (0,-1,-1,0,X,Y) (0,1,1,0,X,Y) (0,1,-1,0,X,Y)

I decided to shade the cells which had identical content - once I examined the image and the grid I realised that the transformations sometimes resulted in the same image, for instance the top left image is repeated on the end of the third row.

The X and Y correspond to the distance along the X and Y axis where you want to place the image