小编kum*_*uma的帖子

我正在尝试使用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 …