SVG 动画，CSS 旋转动画，但保持在同一个地方答案

【问题标题】：SVG animation, CSS spin animation but stay on the same placeSVG 动画，CSS 旋转动画，但保持在同一个地方
【发布时间】：2019-04-13 11:35:04
【问题描述】：

我正在我的网站上为螺旋桨制作动画。
http://bug.soulmates.company（见第 3 节）
但即使我将样式设置为：

.propeller_spin {
   animation-name: spin;
   animation-duration: 4000ms;
   animation-iteration-count: infinite;
   transform-origin: center center;
 }

 @keyframes spin {
   from {
     transform:rotate(0deg);
     transform-origin: center center;
   }
   to {
     transform:rotate(360deg);
     transform-origin: center center;
   }
 }

螺旋桨在旋转时不会停留在原位。

【问题讨论】：

请加.propeller_spin {transform-box: fill-box;}MDN link for transform-box

标签： css animation svg

【解决方案1】：

DOM 元素从它们自己的左上角测量 transform-origin，但 SVG 测量的是相对于父 SVG 画布的 transform-origin。

您可以在 .propeller_spin 类上使用 transform-box: fill-box。

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

【讨论】：