SVG 선형 경사
<defs>와<filter>
모든 SVG 필터는 <defs>
요소에서 정의됩니다.<defs>
요소는 정의(definitions)의 약자로, 특수 요소(예: 필터)의 정의를 포함합니다.
<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> 요소의 filter 속성이 이 요소를 "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> 요소의 in 속성이 "SourceAlpha"로 변경되어 Alpha 채널 대신 전체 RGBA 픽셀을 사용하여 흐림을 생성합니다
예제 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입니다).