HTML5/SVG

SVG Drop Shadows

Jundol 2015. 6. 9. 11:49

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

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


SVG <feOffset>

예제 1

<feOffset>태그는 그림자 효과를 내기 위해 사용한다. 이 태그는 SVG 그래픽에서 착안하였다. 그리고 xy 면을 조금 이동하였다.

offset의 첫번째 예제는 직사각형과 offset태그이다. 그 후 <feBlend>태그를 사용하여 진짜 offset이미지의 제일 위에 그려낸다.

SVG 코드

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

코드 설명
  • <filter>태그 내의 id 속성은 filter의 유니크한 이름을 나타낸다.
  • <rect>태그 내의 filter속성은 속성값의 이름을 filter id 이름과 매핑한다.

예제 2
이제, offset 이미지를 <feGaussianBlur>태그를 이용하여 흐리게 만들 수 있다. 

SVG 코드

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>


코드 설명

  • <feGaussianBlur> 내의 stdDeviation 속성은 blur 의 양을 나타낸다.

예제 3
이제, 그림자로 표현된 부분을 검정색으로 바꾼다.

SVG 코드

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>


코드 설명

  • <feOffset> 태그 내의 in 속성을 SourceAlpha 로 바꾼다. SourceAlpha 속성값은 모든 RGBA 픽셀들을 Alpha 채널의 blur로 대체한다.

예제 4
이제, 그림자에 색상을 입한다.

SVG 코드

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>


코드 설명

  • <feColorMatrix> 태그는 offset이미지의 색상을 검정에 가깝게 바꾸는 역할을 한다. 값의 행렬안의 세 개의 '0.2' 수치는 각각 빨강, 초록, 파랑 채널을 적용시킨다. 그 채널들의 값을 감소시킬수록 색상은 검정색에 가까워진다. (검정색은 0 이다.)

출처 W3Shool.com - SVG - svg_feoffset