SVG路径旋转动画答案

【问题标题】：SVG Path rotation animationSVG路径旋转动画
【发布时间】：2019-04-15 22:03:21
【问题描述】：

我试图让我的 SVG 的一部分旋转，但它似乎围绕着一个非常大的原点旋转，这令人困惑，因为实际路径非常小。

这是我的路径元素动画css：

.wing1 {
  transform-origin: bottom right;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

这里是 JSFiddle（包括 SVG）：http://jsfiddle.net/c5g3sq4e/

我试图让机翼元素围绕右下角旋转，使其看起来像在飞行，但我从未做过 SVG 元素旋转，所以我不确定我是否正确指定了原点.

【问题讨论】：

标签： css svg css-animations

【解决方案1】：

您需要添加transform-box: fill-box; 这将使对象边界框用作参考框。

.wing1 {
  transform-origin: bottom right;
  transform-box: fill-box;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

【讨论】：

transform-box 是最近的事情。如果您想与旧版浏览器兼容，请考虑改用绝对坐标。例如。 transform-origin: 736px -124px;
transform-box 是一个最近的东西，用来修复另一个最近的东西。这支笔：codepen.io/mandymichael/details/LEpywo（作为作者评论）曾经在 chrome 中工作得最好。不再。早在 2014-2015 年，这支笔就可以在没有 transform-box 的情况下工作。现在您需要transform-box 才能使其正常工作。
不完全是。 Chrome 的行为是一个错误。他们现在已经修复了。添加了transform-box 以提供解释transform-origin 的灵活性。您的修复程序现在可以在大多数浏览器中使用。但它不会在一年前的 Firefox 中工作——不管有没有transform-box。我的建议适用于所有版本的 Chrome 和 Firefox。