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

Question

我有这个;

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

没有这部分 CSS 就可以正常工作（第 78 行）;

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

但是当它存在显着的性能问题时，磁贴的 ：hover 状态上的动画存在明显的性能问题（抖动）。

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

任何帮助表示赞赏，

谢谢！

Answer 1

投影本身

就是一个非常昂贵的滤镜。使用框阴影或图像，以便阴影的像素只绘制一次。