CSS变换原点随字体大小变化

我已经创建了一个简单的SVG动画，它使用一个简单的CSS转换和转换在点击时制作动画，请参见此处：

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

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

这是单击后所需的输出：

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

---

对此我能做些什么吗？

我无法重现这个问题，对我来说效果很好。嗯，这是在Mac和Windows上的Chrome浏览器中实现的。我刚刚注意到，在FF中，它甚至更不稳定，完全脱离容器旋转。看起来有一个单独的问题，Firefox无法正确地将transform origin应用于元素。