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

Question

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

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

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

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

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

Answer 1

似乎没有任何跨浏览器兼容的方法。正如@RobertLongson 提到的，看起来很有前途的 filterRes 属性不再是规范的一部分。

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

我计划不使用模糊（在现代机器上是 50-60% CPU，而不是使用模糊接近 100%）或者使用 Canvas 重新制作动画（最好使用50% CPU 一个网站糟透了）。

使用 SVG 和 CSS 动画的简洁声明机制而不是手动为 Canvas 编写绘图例程只会带来很大的损失。这就是生活！

Optimise SVG blur effect via downsampling