SVG 흐림 효과
참고: Internet Explorer와 Safari는 SVG 필터를 지원하지 않습니다!
<defs> 및 <filter>
모든 인터넷 SVG 필터는 <defs> <defs> 요소 정의는 짧으며 특수 요소(예: 필터)에 대한 정의를 포함합니다.
<filter> 태그는 SVG 필터를 정의하는 데 사용됩니다. <filter> 태그는 필수 id 속성을 사용하여 그래프에 적용할 필터를 정의합니다.
SVG <feGaussianBlur>
예제 1
<feGaussianBlur> 요소는 흐림 효과를 만드는 데 사용됩니다.
아래는 SVG 코드입니다:
인스턴스
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg> </body> </html>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스 보기
Opera 사용자의 경우: SVG 파일 보기(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
코드 분석:
<filter>요소 ID 속성은 필터의 고유 이름을 정의합니다
-
<feGaussianBlur>요소는 흐림 효과를 정의합니다
in="SourceGraphic"이 섹션은 전체 이미지에서 생성된 효과를 정의합니다
stdDeviation 속성은 흐림 정도를 정의합니다.
<Rect> 요소의 필터 속성은 요소를 "f1" 필터에 연결하는 데 사용됩니다.
