我尝试使用transform-origin: center围绕SVG的中心旋转SVG。它在Chrome和Firefox以及100%缩放的Safari中完美工作。当我尝试在Safari中缩小或放大页面时，SVG不会围绕其中心旋转。
https://jsbin.com/duwezonate/1/edit?html,css,output您可以通过从Chrome和Safari访问此链接来检查此链接
下面是我的代码片段：

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

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

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