CSS Transform-origin Changing with font-size

问题:

I have created a simple SVG animation where it animates on click using a simple CSS transition and transform (see here: http://jsfiddle.net/T9hsW/1/).

I want the SVG to scale with the user's font-size so I sized it in ems. However, I noticed that if I increase the font-size of my browse using cmd-+ then when I click the SVG, the transform-origin appears to be the old transform origin, not the new one, even though I have used % to set the origin:

svg {
    width: 4em;
    height: 4em;
}
.arrow, .arrows {
    transform-origin: 50% 50%;
    ...
}

This is the desired output after clicking:

This is what it looks like if you increase the browser font size. Note that it is clearly off-center, probably using the original coordinates:

Is there anything I can do about this?