SVG 흐림 효과
<정의> 및 <필터>
모든 인터넷 SVG 필터는 <defs> 요소 내에서 정의됩니다. <defs> 요소는 정의의 약자이며 필터와 같은 특수 요소의 정의를 포함합니다.
<filter> 요소는 SVG 필터를 정의하는 데 사용됩니다. <filter> 요소에는 필터를 식별하는 필수 id 속성이 있습니다. 그러면 그래픽이 사용할 필터를 가리킵니다.
SVG <feGaussianBlur>
실시예 1
<feGaussianBlur> 요소는 흐림 효과를 만드는 데 사용됩니다.
다음은 SVG 코드입니다.
예시
<svg height="110" width="110">
<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>
코드 설명:
- <filter> 요소의 id 속성은 필터의 고유한 이름을 정의합니다.
- 흐림 효과는 <feGaussianBlur> 요소로 정의됩니다.
- in="SourceGraphic" 부분은 전체 요소에 대해 효과가 생성되도록 정의합니다.
- stdDeviation 속성은 흐림 정도를 정의합니다.
- <rect> 요소의 필터 속성은 요소를 "f1" 필터에 연결합니다.