본문 바로가기
HTML5/SVG

SVG Blur Effects

by Jundol 2015. 6. 9.

* 본 글은 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>


'HTML5 > SVG' 카테고리의 다른 글

SVG Linear Gradients  (0) 2015.06.09
SVG Drop Shadows  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08

댓글