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

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


SVG Filters - Intro

지원되는 브라우저

  • 크롬 8.0 이상
  • IE 10.0 이상
  • FF 3.0 이상
  • 사파리 6.0 이상
  • 오페라 9.6 이상

SVG 필터 요소

다음 장에서부터는 터치(설정할수있는)가 가능한 필터들만 보여줄 것이다. 그리고 SVG를 이용해서 어떤것들을 할 수 있는지 아이디어를 줄 것이다.

SVG에서 사용가능한 필터 목록 : 

  • <feBlend> - 이미지결합 필터
  • <feColorMatrix> - 색상변화를위한 필터
  • <feComponentTransfer>
  • <feComposite>
  • <feconvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> -  그림자 효과를 위한 필터
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> - 빛을 위한 필터
  • <fePointLight> - 빛을 위한 필터
  • <feSpotLight> - 빛을 위한 필터

Tip : 각각의 SVG요소에 여러개의 필터를 중복해서 사용이 가능하다.


출처 W3School.com - SVG - Filters

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

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

SVG Drop Shadows  (0) 2015.06.09
SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08