SVG 그림자
참고 : 인터넷 익스플로러와 사파리는 SVG 필터를 지원하지 않습니다!
<응급 바이러스 정의>와 <필터>
SVG는 <응급 바이러스 정의> 요소에 정의 된 모든 인터넷 필터링합니다. <응급 바이러스 정의> 요소는 짧은 정의하고 정의 (예 : 필터와 같은) 특별한 요소가 포함되어 있습니다.
<필터>이 태그는 SVG 필터를 정의하는 데 사용됩니다. 필터 그래픽 응용 프로그램을 정의하는 데 필요한 id 속성과 <필터> 태그?
SVG <feOffset>
예 1
<FeOffset> 요소는 그림자 효과를 만드는 데 사용됩니다. 아이디어는 SVG 그래픽 (또는 이미지 요소)를 가지고 xy 평면에 약간의 주위를 이동하는 것입니다.
첫 번째 예는 (과 <feOffset>) 사각형을 상쇄하고 이미지의 오프셋 (offset) 위에 혼합 (포함 <feBlend>)
다음은 SVG 코드는 다음과 같습니다
예
<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>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
코드 분석 :
- 유일한 이름 <필터> 엘리먼트의 id 속성은 필터를 정의
- 필터 속성 <RECT> 요소에 "F1"필터 요소를 연결하는 데 사용됩니다
예 2
지금, 당신이 흐린 이미지가된다 이동할 수 있습니다 (포함 <feGaussianBlur>)
다음은 SVG 코드는 다음과 같습니다
예
<defs>
<filter id="f1" 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(#f1)" />
</svg>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
코드 분석 :
- stdDeviation는 <feGaussianBlur> 요소 속성은 흐림의 양을 정의
예 3
이제 검은 그림자를 만들 :
다음은 SVG 코드는 다음과 같습니다
예
<defs>
<filter id="f1" 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(#f1)" />
</svg>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
코드 분석 :
- 속성 <feOffset> 요소가 아니라 전체 RGBA 픽셀보다 알파 채널의 "SourceAlpha"사용 흐림,에.
예 4
그림자 이제 컬러로 코팅 :
다음은 SVG 코드는 다음과 같습니다
예
<defs>
<filter id="f1" 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(#f1)" />
</svg>
»시도
오페라 사용자 : 보기 SVG 파일 (미리보기 소스 SVG 그래픽을 마우스 오른쪽 버튼으로 클릭).
코드 분석 :
- <FeColorMatrix> 오프셋 필터는 검은 색이 더욱 가깝게 이미지로 변환하는 데 사용된다. '0.2'얻기 세 값은 적색, 녹색 및 청색 채널들의 행렬을 곱한다. 그 값을 줄이기 블랙 색상을 가지고 (블랙 0)