<응급 바이러스 정의>와 <필터>
모든 SVG 필터는 내 정의 된 <defs> 요소입니다. <defs> 요소는 정의에 대한 짧고 특별한 요소의 정의를 포함 (such as filters) .
<filter> 요소는 SVG 필터를 정의하는 데 사용됩니다. <filter> 요소는 필터를 식별하는 필수 id 속성이 있습니다. 그래픽은 사용하는 필터를 가리 킵니다.
SVG <feOffset>
예 1
<feOffset> 요소는 그림자 효과를 만드는 데 사용됩니다. 아이디어는 SVG 그래픽 걸릴 것입니다 (image or element) 과 xy 평면에 그것을 조금 이동합니다.
첫 번째 예는 사각형을 상쇄 (with <feOffset>) , 다음 오프셋 이미지 위에 원본을 혼합 (with <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>
»그것을 자신을 시도 Code explanation:
- id 의 속성 <filter> 요소는 필터의 고유 한 이름을 정의합니다
- filter 의 속성 <rect> 요소는에 요소를 연결 "f1" 필터
예 2
이제, 오프셋 이미지를 흐리게 할 수있다 (with <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>
»그것을 자신을 시도 Code explanation:
- stdDeviation 의 속성 <feGaussianBlur> 요소는 흐림의 양을 정의
예 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>
»그것을 자신을 시도 Code explanation:
- in 의 속성 <feOffset> 요소로 변경 "SourceAlpha" 대신 전체 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>
»그것을 자신을 시도 Code explanation:
- <feColorMatrix> 필터 가까이 검은 색에 오프셋 이미지의 색상을 변환하는 데 사용됩니다. 행렬에서 '0.2'모두의 세 값은 적색, 녹색 및 청색 채널을 곱하여 얻는다. 그 값을 줄이기 검정 색상 가까이 제공 (black is 0)