SVG Blur Effects

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

<defs> , <filter>

모든 인터넷상 SVG필터들은 <defs>요소 안쪽에 정의하고있다. <defs>요소는 정의를 생략하기 위하거나 필터같은 특별한 요소의 정의를 포함하기도한다. 

<filter>요소는 SVG 필터를 정의하기위해 사용한다. <filter>요소는 각 필터들을 구분하기 위해서 id속성을 필요로 한다. 

SVG <feGaussianBlur>

예제 1

<feGaussianBlur>요소는 blur 효과를 나타내기 위해 사용한다.

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 속성은 필터의 유니크한 이름을 부여하는데 사용한다.
• blur효과를 내기 위해 <feGaussianBlur> 태그를 사용했다.
• in="SourceGraphic" 부분은 전체 요소에 효과를 만들기 위해 사용한다.
• stdDeviation 속성은 blur의 양을 결정하는데 사용한다.
• <rect>태그 내에 있는 filter 속성은 filter요소의 f1아이디를 가진 필터와 연결된다.

출처 W3School.com - SVG - svg <feGaussianBlur>

http://www.w3schools.com/svg/svg_fegaussianblur.asp