ios - 如何修复 iOS 11 和 macOS V10.12 Safari 上损坏的 transform-origin？

Question

我正在尝试使用 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 中不起作用？

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

我的期望:

我在 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/aVzeEK问题的另一个例子。看起来 origin 被 Safari 设置为 svg 元素的中心。

Answer 1

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