如何通過htnl5利用svg來實現(xiàn)高斯模糊的效果？實現(xiàn)效果的方法分享！

使用過PS軟件的小伙伴們都知道高斯模糊這個效果吧!那么今天我們就來講一下有關于：“如何通過htnl5利用svg來實現(xiàn)高斯模糊的效果？”這個問題，下面是小編整理的相關內容，有感興趣的小伙伴們快來參考學習了解吧！

先在頁面任意區(qū)域放上這段代碼：

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中進行學習和了解。