通过下采样优化SVG模糊效果

Question

我有一个带有模糊效果的动画SVG图像。模糊被添加到最外面的组，我正在使用标准过滤器：

<filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" color-interpolation-filters="sRGB" />
</filter>

显然，对于浏览器中的动画全窗口图像，这很昂贵。 Safari / Chrome / Firefox在我的机器上使用100-150％的CPU，页面响应不是很快，这是不可接受的。

如果我使用画布或其他技术，我会考虑以较低的分辨率渲染图像，以使动画更便宜。这是一张背景图片，所以外观还可以。有没有办法用SVG做到这一点？或者是否有一些比feGaussianBlur便宜得多的其他过滤器？

编辑：经过多次阅读后，我找到了filterRes过滤器选项，这正是我想要的，但Chrome似乎并不支持。

Answer 1

似乎没有任何方式可以实现跨浏览器兼容。正如@RobertLongson所提到的那样，看起来很有希望的filterRes属性不再是规范的一部分。

我发现通过CSS过滤器模糊，与SVG模糊过滤器相比，浏览器没有显着的性能提升。

我计划要么没有模糊（现代机器上50-60％的CPU而不是接近100％的模糊）或使用Canvas重新制作动画（最好甚至使用50％的CPU来处理网站）。 / p>

使用SVG和CSS动画的清晰声明机制而不是为Canvas手动编写绘图例程只是一个很大的惩罚。这就是生活！