我认为，最简单的方法是使用positions CSS- relative parent应该在相同的XY坐标中保存孩子，然后你可以在svg下放置阴影，两个元素都不依赖于对方。
然后你可以使阴影依赖于你的svg

@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
.rotate{
    animation: rotation 30s infinite linear;
}
.shadow{
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}
.parent{
  position:relative;
}
.parent > svg {
  position:absolute;
}

<div class="parent">
  <svg class="shadow" width="100" height="100">
    <rect width="300" height="100" style="fill:#fff" />
  </svg>
  <svg class="rotate" width="100" height="100">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  </svg>
</div>