페이지 가우시안 블러를 구현하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!