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

Question

3

我有这个; http://codepen.io/tacrossman/pen/JDxcf 如果没有CSS的这一部分(第78行)，它可以正常工作;

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

但是，当有阴影时，平铺的:hover状态动画会出现明显的性能问题（卡顿）。这是一个已知的性能问题吗？还是我使用了错误的阴影效果？我已经尝试将它分别放置在每个SVG上，但是也没有用。任何帮助都将不胜感激，谢谢！

- Thomas Crossman

我认为你遇到了性能不佳的魔法点。如果我在做这个项目，我会尝试在单个SVG容器中使用纯SVG + JavaScript来完成它。 - Michael Mullany

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Esailija · Answer 1

投影阴影本质上是一种非常昂贵的滤镜。使用box-shadow或图像，以便阴影像素仅绘制一次。