通过缩减采样优化SVG模糊效果

我有一个具有模糊效果的动画SVG图像。模糊被添加到最外面的基团，并且我使用标准过滤器：通过缩减采样优化SVG模糊效果

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

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

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

编辑：经过一些阅读，我发现filterRes过滤器选项，这正是我想要的，但似乎并没有得到铬支持。

来源

2016-12-09 Dan Halliday

至少在Chrome上，对于某些类型的过滤器，-webkit过滤器CSS路径速度更快，因为它们在GPU上执行此操作。 GaussianBlur是SVG滤镜中最便宜的模糊 - ConvolveMatrix速度要慢得多。 –

Chrome和Firefox现在遵循不再支持filterRes –

@RobertLongson的更新的[Filter Effects Specification]（https://www.w3.org/TR/filter-effects-1/），谢谢，那看起来像filterRes只适用于Safari - 它正在出路。在我的测试中，CSS过滤同样很昂贵。过滤单个元素似乎比过滤整个图像要便宜，但在Firefox中留下一些令人讨厌的人为因素影像。 Chrome浏览器不喜欢某些群组的过滤器。这一切都是一团糟，兼容性。 –

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

与SVG模糊滤镜相比，我发现CSS模糊滤镜效果并没有显着改善浏览器的性能。我计划要么没有模糊（在现代机器上50-60％的CPU，而不是模糊的接近100％），要么使用Canvas重新制作动画（最好是使用50％的CPU为网站吸引）。

对于使用SVG和CSS动画的干净声明机制而不是手动为Canvas写入绘图例程有一个很大的损失。这就是人生！

来源

2017-02-15 09:41:54

通过缩减采样优化SVG模糊效果

回答

相关问题