如何修复 iOS 11 和 macOS V10.12 Safari 上损坏的变换原点？

我正在尝试使用 svg 来实现 CSS 动画。
我期望 2 个 svg 盒子正在旋转（旋转）transform-origin: center center;360度。看起来它在 Chrome 和 Firefox 上的表现符合我的预期，但在 macOS 10.12 (High Sierra) 和 iOS 11.0.x 和 11.1 beta Safari 上则不然。
似乎transform-origin: center center;在 Safari 中不起作用？

有什么办法可以解决这个问题吗？

What I expect:

What I see on Safari:

这是示例代码

HTML:

svg(width=500, height=500, viewBox='0 0 500 500')
  rect(x=100, y=100, width=50, height=100)
  rect(x=400, y=100, width=50, height=100)

CSS:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

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

rect {
  transform-origin: center center;
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  &:nth-child(1) {
    fill: red;
  }

  &:nth-child(2) {
    fill: blue;
  }
}

您可以通过使用 Chrome 和 Safari 访问来查看此处的行为：https://codepen.io/manaten/pen/aLeXjW https://codepen.io/manaten/pen/aLeXjW

EDIT:

https://codepen.io/manaten/pen/aVzeEK https://codepen.io/manaten/pen/aVzeEK该问题的另一个例子。看起来 Safari 将 origin 设置为 svg 元素的中心。

尝试变换框：填充框； 这定义了与transform和transform-origin属性相关的布局框