使用SVG阴影滤镜的CSS动画性能问题

Question

我有这个;

http://codepen.io/tacrossman/pen/JDxcf

如果没有CSS的这一部分（第78行），哪个工作正常;

svg {
-webkit-filter: drop-shadow( 1px 1px 5px #000 );
}

但是当它出现时，存在重要的性能问题（急动），动画处于：磁贴的悬停状态。

这是性能的已知问题还是我错误地应用了阴影？我试图将它放在每个SVG上，但也无济于事。

任何帮助表示赞赏，

谢谢！

Answer 1

投影本身就是一个非常昂贵的过滤器。使用框阴影或图像，这样阴影的像素只会被绘制一次。