css - 在 Firefox 中旋转 SVG CSS 动画不起作用，需要 SVG 回退

Question

我正在尝试为这些齿轮制作动画，它在 Chrome 中按预期工作。但是，在 Firefox 中，旋转原点不同，无法弄清楚如何解决这个问题。

我试过使用 width、height、viewbox 和 x & y 属性，但似乎没有什么能完美地工作。

基于SVG rotate path example .

最后，在不支持我的图形/动画的其他/旧版浏览器中为我的 SVG 路径提供适当回退的最佳做法是什么？

其余代码在这里:jsFiddle here (HTML + SVG 代码太长，无法粘贴)

CSS:

#gear-head {
  position: fixed;
  background: #172235;
  width: auto;
  height: 100%;
}
#gear-head .gear {
  -webkit-animation: rotation 6s infinite linear;
  -moz-animation: rotation 6s infinite linear;
  -o-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
#gear-head .pulsating {
  -webkit-animation: pulsate 6s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.5;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

Answer 1

简单的解决方案是使用半高和半宽单位:

而不是 transform-origin: 50% 50%;

获取 svg 的宽度和高度(例如:width="234px"height="186px")；将两个值除以 2(分别得到 117px 和 93px)；然后使用

变换原点:117px 93px；

这应该适用于所有浏览器(我只在 Safari、Chrome 和 Firefox 上测试过)