SVG 필터링

SVG에서는 필터라고 하여, 그린 것에 흐림 등의 이펙트를 걸리는 처리를 실시할 수 있습니다.

filter 요소

filter는 요소로 정의할 수 있습니다.
filter 요소 내에서 다양한 요소로 filter를 정의합니다.
아래에서는 feGaussianBlur을 사용합니다.
Gaussian Blur는 가우스 분포의 공식을 사용한 흐림입니다. 자세한 내용은 아래 링크에서 확인하십시오.
h tp : // 엔.ぃきぺぢ아. 오 rg / uuki /

filter.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5,10" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="50" fill="red" stroke="blue" stroke-wdith="5" filter="url(#gaussian)" />
</svg>

sddDeviation은 가우스 분포 표현식의 x, y 값을 나타냅니다.
in 속성은 필터의 입력 유형을 나타내고 SourceGraphic은 필터가 적용되는 그래픽을 사용합니다.
결과는 다음과 같습니다.

feMerge

필터를 여러 레이어 준비하고 겹치고 싶을 때는 feMerge 요소를 사용합니다.
feMerge 요소는 자식 요소에 feMergeNode를 가지며 이를 겹칩니다.
아래는 feGaussianBlur과 feOffset(dx와 dy만 어긋나는 필터)를 준비하여 겹쳐 봅니다.

filter2.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5,10" result="blur" />
      <feOffset in="SourceGraphic" dx="5" fy="5" result="offset" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="offset" />
      </feMerge>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="50" fill="red" filter="url(#gaussian)" />
</svg>

필터를 쓸 수 있는 결과는 result로 이름을 붙일 수 있으므로, 그 result의 값을 feMergeNode의 in으로 해 중첩하고 있습니다.
결과는 다음과 같습니다.

다양한 필터

필터에는 다른 많은 요소가 있습니다.
또한 feDiffuseLighting과 feSpecularLighting에는 광원을 설정할 수 있으며 광원을 설정하는 요소에는 feDistantLight, fePointLight, feSpotLight가 있습니다.

이곳은 또 다른 기회에 설명하려고 합니다.