SVG 흐림 효과 - 가우시안 흐림
참고 : 인터넷 익스플로러와 사파리는 SVG 필터를 지원하지 않습니다!
<응급 바이러스 정의>와 <필터>
SVG는 <응급 바이러스 정의> 요소에 정의 된 모든 인터넷 필터링합니다. <응급 바이러스 정의> 요소는 짧은 정의하고 정의 (예 : 필터와 같은) 특별한 요소가 포함되어 있습니다.
<필터>이 태그는 SVG 필터를 정의하는 데 사용됩니다. 필터 그래픽 응용 프로그램을 정의하는 데 필요한 id 속성과 <필터> 태그?
SVG <feGaussianBlur>
예 1
<FeGaussianBlur> 요소는 흐림 효과를 만드는 데 사용됩니다 :
다음은 SVG 코드는 다음과 같습니다
예
<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>
<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>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
코드 분석 :
- 유일한 이름 <필터> 엘리먼트의 id 속성은 필터를 정의
- <FeGaussianBlur> 요소는 흐림을 정의
- = "SourceGraphic"이 절은 전체 이미지에 의해 생성 된 효과를 정의
- stdDeviation 속성은 흐림의 양을 정의
- 필터 속성 <RECT> 요소에 "F1"필터 요소를 연결하는 데 사용됩니다