ページのガウスぼかしを実装する 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 中国語 Web サイトの他の関連記事を参照してください。