While someone else has javascript and canvas covered, I wanted to learn some new things about SVG. While perhaps best known for the tiger and other graphic goodness, I am not a graphics artist. So these didn’t apply to me so much. However, you can do some neat things with images in SVG that are harder/impossible to do in CSS, such as rotating images and skewing them.
So I started doing some things with SVG. One of those being something to catalog all the albums I have started amassing (I only have 460MB left of my 2GB iPod). Yes, I still do pay for music. I’m old skool like that.
Not much. But it took me so long to get rotation working, mainly because of lack of good sample documentation. Though I came across some good docs, it just wasn’t enough. For example, here is the code to rorate:
rotate(angle, cx, cy)
Where angle is how much you want to rotate it by, in degrees.
cx and cy are the “offset of the current view box. If cx and cy are not present then the points are rotated around the origin” (Bystedt). Both cx and cy are optional.
Maybe an example of rotation would clarify cx and cy. Here is the first image being rotated 45° without skewing at point 0,0.
To rotate an image at the centre, cx and cy should be the distance to the centre of the image. Both on the x-axis and y-axis respectively. Imagine to my horror when the image was 50% from the left, and a 45° rotate threw it down half way across the screen. I won’t bore you with the details of how changing cx and cy confused me even more, but some samples would have helped!