SVG动画，CSS旋转动画但保持在同一位置

Question

我是一个网站上的螺旋桨动画设计师。
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;
   }
 }

螺旋桨在旋转时不能保持在原位。

- user8733234

---

请添加.propeller_spin {transform-box: fill-box;}代码。MDN链接 - transform-box - enxaneta

Answer 1

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

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

transform-box CSS属性定义与transform和transform-origin属性相关联的布局框。

- Iulius