如何通过htnl5利用svg来实现高斯模糊的效果？实现效果的方法分享！

使用过PS软件的小伙伴们都知道高斯模糊这个效果吧!那么今天我们就来讲一下有关于：“如何通过htnl5利用svg来实现高斯模糊的效果？”这个问题，下面是小编整理的相关内容，有感兴趣的小伙伴们快来参考学习了解吧！

先在页面任意区域放上这段代码：

stdDeviation设置模糊量，最低0

<svg style="display:none">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="1"/>
    </filter>
    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2"/>
    </filter>
</svg>

在dom上调用模糊效果：

document.body.style.filter='url(#blur-effect-2)' //调用2级模糊量

document.body.removeAttribute("style");//关闭模糊效果

通过上面我们说的这两端代码中就对我们高斯模糊效果有所了解，当然如果你对html有感兴趣的话我们可以在W3Cschool中进行学习和了解。