CSS transform-origin 无法按预期在 Safari 中工作

Question

我正在尝试使用

transform-origin: center

围绕其中心旋转（旋转）svg。它在 Chrome 和 FireFox 以及 Safari 中以 100% 缩放完美运行。当我试图在 safari 中缩小或放大页面时，svg 不会围绕其中心旋转。

这是我的代码，

HTML

<svg viewBox="0 0 50 50">
  <circle fill="none" cx="25" cy="25" r="12" stroke-dasharray="50" stroke-dashoffset="10" />
</svg>

CSS

circle {
 stroke: currentColor;
 transform-origin: center;
 animation: 1s infinite rotate-360;
}

@keyframes rotate-360 {
 100% {
   transform: rotate(360deg);
 }
}

https://jsbin.com/duwezonate/1/edit?html,css,output您可以通过从 Chrome 和 Safari 访问它来检查此链接