Rotate (svg, css) around an arbitrary point, without transform-origin

Question

I want to rotate e.g. a svg-rect around a certain point without using transform-origin, say only using chained translates and (origin-)rotates.

Due to my research I found out you do that this way:

1. translate the rotation point to the origin
2. rotate
3. redo (1), say translate it back

but when I use

transform="translate(-100, -50) rotate(30)  translate(100, 50)"

it turns out to be rendered at the wrong position compared to

transform="rotate(30, 100, 50)"

I have made a fiddle for this: http://jsfiddle.net/VYmrX/. The blue rect is the original rect, the green one is for comparison and the red one is transformed with the approach from above. I want it to be rotated around its center (100, 50).

How can I obtain that without using the transform-origin?

Answer 1

You're nearly there but it's the other way round,

transform="translate(100, 50) rotate(30) translate(-100, -50)"

is equivalent to transform="rotate(30, 100, 50)"

You kind of need to read multiple transforms from right to left as it is the rightmost part that is applied first.