如何在iOS11和macOS10.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-b​​ox：fill-box; 这定义了变换和变换原点属性与

相关的布局框

Answer 2

transform-b​​ox：fill-box;似乎解决了这个问题。

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

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

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

您的第一个带变换框的样本：

https://codepen.io/MichaelSchober/pen/QOPbKx

适用于使用Safari 11.0.1的MacO HighSierra 10.13.1

该物业仍然具有实验性。因此，请务必检查浏览器的兼容性是否合适：

https://developer.mozilla.org/de/docs/Web/CSS/transform-box