通过下采样来优化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，而不是使用Blur接近100％），或者使用帆布恢复动画（甚至可以使用50％的CPU作为网站糟糕）。<<<<<<<<<<<<<<<<<<<<<<<<<<

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