svg實作頁面高斯模糊的程式碼

這篇文章要跟大家分享的內容是關於利用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");//关闭模糊效果

相關推薦：

JS如何操作svg來畫圖

#

以上是svg實作頁面高斯模糊的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！