SVG过滤器替代/替换策略

时间:2016-07-26 04:29:17

标签: javascript performance svg svg-filters

当您创建带阴影的SVG,然后放大/缩小SVG时,由于重新计算阴影,您会遇到一些严重的性能问题。

过去,您可以使用filterRes=''来解决这个问题。但是,过滤器已被弃用并从SVG规范中删除。

我正在寻找filterRes=''的替代方案,这将允许我在执行诸如放大/缩小等导致重新计算阴影的事情时以高效的方式处理SVG阴影之类的事情。

有人有任何经验可以克服曾经过滤过滤器出现的性能障碍吗?有关替换过滤器用于提供的功能的策略的任何示例吗?

2 个答案:

答案 0 :(得分:0)

最简单的方法是将阴影渲染到svg中包含的图像。从那开始,可能存在可以在不同分辨率下生成阴影并根据需要提取适当大小的解决方案。您也可以使用<canvas>创建阴影客户端,并将其作为base64编码的图像源传递给svg。

这在很大程度上取决于您的应用和性能要求,因此只需要三个或三个步骤即可。预渲染,或者需要应用更复杂的东西......

顺便说一下。您还可以使用Javascript引用<filter>元素并直接操作过滤器属性...

答案 1 :(得分:0)

如果你可以说服浏览器在GPU而不是CPU上进行缩放,这将使事情变得更加高效,因此使用CSS 3D Transforms而不是JavaScript或viewBox动画来放大和缩小SVG可能会成功。

相关问题