SVG 흐림 효과

SVG는 <feGaussianBlur> 요소를 사용하여 흐림 효과를 표시합니다. <feGaussianBlur> 필터는 입력 이미지에 고사이즈의 흐림을 적용하며, Internet Explorer 9와 더 이전 버전에서 SVG 필터를 지원하지 않습니다.

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0">
　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="15"　/>
　　　　</filter>
　　</defs>
　　<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)"　/>
</svg>

실행된 후 생성된 이미지 효과는 다음과 같습니다:

사용 설명

• <filter>의 id 속성은 패턴의 유일한 이름을 정의합니다.

• <feGaussianBlur> 요소는 흐림 효과를 정의합니다.

• <feGaussianBlur> 요소의 in = "SourceGraphic" 부분은 전체 요소에 대해 정의된 효과로 사용됩니다.

• stdDeviation 속성은 흐림의 양을 정의합니다.

• <rect> 요소의 filter 속성은 요소를 " p1”필터.