SVG 흐림 효과

<defs>와 <filter>

모든 SVG 필터는 <defs> 요소 내에서 정의됩니다.<defs> 요소는 정의(definitions)의 약자로, 특수 요소(예: 필터)의 정의를 포함합니다.

<filter> 요소는 SVG 필터를 정의합니다.<filter> 요소는 필터를 식별하기 위해 필요한 id 속성을 가집니다. 그런 다음 그래픽이 사용할 필터를 지정합니다.

SVG <feGaussianBlur>

예제 1

<feGaussianBlur> 요소는 흐림 효과를 생성하기 위해 사용됩니다:

이 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 속성은 필터의 독특한 이름을 정의합니다
  • <feGaussianBlur> 요소는 흐림 효과를 정의합니다
  • in="SourceGraphic"는 전체 요소에 대해 생성된 효과를 정의합니다
  • stdDeviation 속성은 흐림 정도를 정의합니다
  • <rect> 요소의 filter 속성은 "f1" 필터에 연결됩니다