Positioning SVG elements using CSS

Question

Assume the following svg document:

Answer 1

I came here looking for a fix but fixed the issue myself, thought I would share:

transform: translate(100px, 100px)

Appears to work in all modern browsers except for Internet Explorer, right up until Microsoft Edge (which isn't even out yet) which is quite disappointing. The elements I've tested on are:

The only issue I've had is with elements, and the solution there is to wrap the in a and apply the transformation to that. That should also work for any elements I haven't yet tested that have issues with transform: translate().

I haven't found a decent fallback for Internet Explorer, instead I've made sure that the transforms aren't vital to the function of the SVG.