svg code to implement page Gaussian blur

The content shared with you in this article is about using svg to achieve page Gaussian blur. It has certain reference value. Friends in need can refer to it.

First put this code in any area of ​​the page
stdDeviation sets the blur amount, the minimum is 0

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

---

Call the blur effect on the dom

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

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

Related Recommended:

How to operate svg with JS to draw pictures

The above is the detailed content of svg code to implement page Gaussian blur. For more information, please follow other related articles on the PHP Chinese website!