通过下采样优化SVG模糊效果
通过下采样优化SVG模糊效果
提问于 2016-12-09 21:17:39
我有一个带有模糊效果的SVG动画图像。模糊将添加到最外层的组中，我使用的是标准过滤器：
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" color-interpolation-filters="sRGB" />
</filter>显然，对于浏览器中的全窗口动画图像来说，这是昂贵的.Safari/Chrome/Firefox在我的机器上使用100%-150%的CPU，并且页面的响应能力不强，这是不可接受的。
如果我在使用画布或其他技术，我会考虑以更低的分辨率渲染图像，从而使动画更便宜。这是一个背景图像，所以外观是可以的。有什么方法可以用SVG来实现吗？还是有其他比feGaussianBlur便宜得多的过滤器？
编辑:经过更多的阅读，我找到了filterRes过滤器选项，这正是我想要的，但似乎不受Chrome的支持。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-15 09:41:54
似乎没有任何方法来做到这是跨浏览器兼容。正如@RobertLongson所提到的，看起来很有希望的filterRes属性不再是规范的一部分。
与SVG模糊过滤器相比，我发现通过CSS过滤器在浏览器之间没有显着的性能改善。
我计划要么不使用模糊(在现代机器上有50-60%的CPU，而不是接近100%的模糊)，或者使用画布重做动画(甚至比使用50% CPU的网站更好)。
使用SVG和CSS动画的干净声明机制，而不是为画布手工绘制例程，这是一个很大的损失。生命就是这样！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41069055
复制相关文章
相似问题
腾讯云开发者
