SVG 필터

필터 정의 & 매핑

SVG 그래픽에 적용 가능한 필터를 사용자가 직접 작성할 수 있습니다. <defs> 요소 내부에 <filter>를 정의한 후, 필터를 적용할 요소에 filter 속성 값에 필터를 참조하여 사용하면 됩니다. 간단한 GaussianBlur 필터를 정의한 후 사용하는 코드를 살펴보세요.

<svg>

  <defs>
    <filter id="blurFilter"> 
      <feGaussianBlur in="sourceGraphic" stdDeviation="4" />
    </filter>
   </defs>
  
  <text
    fill="url(#text-pattern)"   
    mask="url(#text-mask)"
    filter="url(#blurFilter)">SVG</text>
  
</svg>

커스텀 SVG 필터 세트

FILDROP은 스페인 국적의 프론트엔드 개발자 이자, 디자이너인 Jorge Aznar가 개발한 커스텀 SVG 필터 모음을 제공합니다. 사진을 드래그 앤 드롭한 후, 제공되는 필터 효과를 확인할 수 있고, 생성된 SVG 필터 코드를 복사할 수도 있습니다.

참고

PreviousSVG 패턴 NextSVG 접근성

Last updated 6 years ago