CSS Transform-origin使用font-size更改

Question

我创建了一个简单的SVG动画，它使用简单的CSS转换和转换动画点击（请参阅此处：http://jsfiddle.net/T9hsW/1/）。

我希望SVG能够根据用户的字体大小进行扩展，因此我在ems中对其进行了调整。但是，我注意到如果我使用cmd- +增加浏览的字体大小，那么当我单击SVG时，transform-origin似乎是旧的转换原点，而不是新的转换原点，即使我使用了％设置原点：

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

点击后，这是所需的输出：

如果您增加浏览器字体大小，这就是它的样子。请注意，它显然偏离中心，可能使用原始坐标：

我能做些什么吗？