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

我有一个带有模糊效果的动态SVG图像。模糊被添加到最外层的组中，我使用的是标准过滤器：

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

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

<>如果我使用画布或其他技术，我会考虑以较低的分辨率渲染图像，使动画更加便宜。这是一个背景图像，所以外观还可以。有没有一种方法可以用SVG实现这一点？或者还有其他比feGaussianBlur更便宜的过滤器吗

---

编辑：在进一步阅读之后，我找到了过滤器选项，这正是我想要的，但Chrome似乎不支持它。

似乎没有任何跨浏览器兼容的方法。正如@RobertLongson所提到的，看起来很有前途的

filterRes

属性不再是规范的一部分

我发现，与SVG模糊过滤器相比，通过CSS过滤器实现的模糊在不同浏览器中没有显著的性能改进

我计划要么不使用模糊（在现代机器上使用50-60%的CPU，而不是接近100%的模糊），要么使用画布重新制作动画（最好是在网站上使用50%的CPU）

---

使用SVG和CSS动画的干净声明机制，而不是为画布手动编写绘图例程，这会带来很大的损失。这就是生活

至少在Chrome上，-webkit过滤器CSS路径对于某些类型的过滤器更快，因为它们是在GPU上实现的。GaussianBlur是SVG过滤器中可用的最便宜的模糊，卷积矩阵的速度要慢得多。Chrome和Firefox现在采用的是不再支持的更新版本filterRes@RobertLongson谢谢，这看起来确实像是filterRes只在Safari中起作用的原因——它已经过时了。CSS过滤在我的测试中同样昂贵。过滤单个元素似乎比过滤整个图像便宜，但在Firefox中为我的图像留下了一些令人讨厌的人工制品。Chrome不喜欢某些组上的过滤器。从兼容性的角度看，这一切都有点混乱。用一个测试用例提出一个Firefox关于工件的bug。