CSS旋转动画：如何仅旋转SVG而让阴影保持固定？

问题出在drop-shadow滤镜直接作用于SVG元素本身，当SVG执行旋转变换时，滤镜会跟着元素同步变换，导致阴影一起旋转。要实现仅SVG旋转、阴影固定的效果，最稳妥的方式是将阴影与SVG分离到不同层级：

具体实现步骤 #

1. 用容器元素包裹SVG，把阴影滤镜应用到容器上
2. 仅给内部的SVG添加旋转动画

修改后的代码：

<div class="shadow-wrapper">
  <svg class="rotate" />
</div>

@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100%{
      transform: rotate(360deg);
    }
}
.rotate{
    animation: rotation 30s infinite linear;
    display: block; /* 消除SVG默认inline布局带来的间隙 */
}
.shadow-wrapper{
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
    display: inline-block; /* 让容器贴合SVG的尺寸 */
}

原理说明 #

容器元素负责承载固定的阴影效果，不执行任何旋转变换；内部的SVG独立执行旋转动画。由于阴影是加在父容器上的，无论SVG怎么旋转，阴影都会保持初始的偏移方向和位置不变。

如果场景不允许添加额外容器，也可以尝试用伪元素模拟阴影，但这种方法需要手动匹配SVG的尺寸和位置，灵活性较差，因此更推荐上面的容器方案。

内容的提问来源于stack exchange，提问作者Riku Akira