SVG 그림자
<정의> 및 <필터>
모든 SVG 필터는 <defs> 요소 내에서 정의됩니다. <defs> 요소는 정의의 약자이며 필터와 같은 특수 요소의 정의를 포함합니다.
<filter> 요소는 SVG 필터를 정의하는 데 사용됩니다. <filter> 요소에는 필터를 식별하는 필수 id 속성이 있습니다. 그러면 그래픽이 사용할 필터를 가리킵니다.
SVG <feOffset>
실시예 1
<feOffset> 요소는 그림자 효과를 만드는 데 사용됩니다. 아이디어는 SVG 그래픽(이미지 또는 요소)을 가져와 xy 평면에서 약간 이동하는 것입니다.
첫 번째 예는 직사각형을 오프셋(<feOffset> 사용)한 다음 오프셋 이미지 위에 원본을 혼합합니다(<feBlend> 사용).
다음은 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 속성은 필터의 고유한 이름을 정의합니다.
- <rect> 요소의 필터 속성은 요소를 "f1" 필터에 연결합니다.
실시예 2
이제 오프셋 이미지를 흐리게 할 수 있습니다(<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 속성은 흐림 정도를 정의합니다.
실시예 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> 요소의 속성이 전체 RGBA 픽셀 대신 흐림에 알파 채널을 사용하는 "SourceAlpha"로 변경되었습니다.
실시예 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> 필터는 오프셋 이미지의 색상을 검정색에 더 가깝게 변환하는 데 사용됩니다. 행렬에서 '0.2'의 세 값은 모두 빨강, 녹색 및 파랑 채널로 곱해집니다. 값을 줄이면 색상이 검정색에 가까워집니다(검은색은 0).