How to use Gaussian blur on svg page in html5

This article mainly introduces the relevant information on how html5 uses Gaussian blur on svg pages. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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");//关闭模糊效果

Summary : The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

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