在浏览器中调整大小时如何解决SVG中的变换原点更改

Question

我有一个带有CSS关键帧动画路径的SVG。问题在于调整字体大小以实现可访问性（例如，在Mac上使用Command +或Command），这会抛弃旋转路径的原点-在这种情况下为圆圈。

可以在此处找到代码示例-https://codepen.io/owengot/pen/XwQbqK

有关圈子的CSS是这样的：

#circle1 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-right 12s linear 0s infinite;
}

#circle2 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-left 24s linear 0s infinite;
}

#circle3 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-right 12s linear 0s infinite;
}

 #circle4 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-left 24s linear 0s infinite;
}

#circle5 {
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-origin: 200px 200px;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: rotate-right 12s linear 0s infinite;
}

要解决此问题，是否存在- a）一种防止调整SVG元素（或与此有关的任何元素）大小的方法？ b）相对于SVG的视口维护变换原点属性的方法？

添加到解决方案B中）我尝试用百分比值固定原点，但这不能解决问题。