>  기사  >  웹 프론트엔드  >  페이지 가우시안 블러를 구현하는 svg 코드

페이지 가우시안 블러를 구현하는 svg 코드

不言
不言원래의
2018-07-19 17:23:201560검색

이 기사에서 공유한 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.