SVG 그림자
참고: Internet Explorer와 Safari는 SVG 필터를 지원하지 않습니다!
<defs> 및 <filter>
모든 인터넷 SVG 필터는 <defs> <defs> 요소 정의는 짧으며 특수 요소(예: 필터)에 대한 정의를 포함합니다.
<filter> 태그는 SVG 필터를 정의하는 데 사용됩니다. <filter> 태그는 필수 id 속성을 사용하여 그래프에 적용할 필터를 정의합니다.
SVG <feOffset>
예제 1
<feOffset> 요소는 그림자 효과를 만드는 데 사용됩니다. 아이디어는 SVG 그래픽(이미지 또는 요소)을 가져와 xy 평면에서 약간 이동하는 것입니다.
첫 번째 예에서는 직사각형을 오프셋하고(<feOffset> 사용) 이미지 상단 오프셋을 혼합합니다(<feBlend> 사용).
SVG 코드는 다음과 같습니다.
인스턴스
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
코드 분석:
<filter>요소 ID 속성은 필터의 고유 이름을 정의합니다
-
<direct> 요소의 필터 속성은 요소를 "f1" 필터에 연결하는 데 사용됩니다.
예제 2
이제 , offset 이미지가 흐려질 수 있습니다(<feGaussianBlur> 포함):
SVG 코드는 다음과 같습니다.
Opera 사용자의 경우: 보기 SVG 파일(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭)
코드 분석:
<feGaussianBlur> 요소의 stdDeviation 속성은 흐림 정도를 정의합니다.
예 3
이제 검은 그림자를 만듭니다.
SVG 코드는 다음과 같습니다.
예
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
코드 분석:
<feOffset>요소의 속성이 "SourceAlpha"로 변경되어 알파 채널에서 잔상을 대신 사용합니다. 전체 RGBA 픽셀의
예 4
이제 그림자에 색상을 적용합니다.
SVG 코드는 다음과 같습니다.
인스턴스
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Opera 사용자의 경우: SVG 파일을 봅니다(SVG 그래픽 미리보기 소스를 마우스 오른쪽 버튼으로 클릭).
코드 분석:
<feColorMatrix> 필터는 오프셋 이미지를 검정색에 가까운 색상으로 변환하는 데 사용됩니다. '0.2' 행렬의 세 가지 값은 빨간색, 녹색, 파란색 채널을 곱하여 얻은 것입니다. 값을 낮추면 색상이 검은색이 됩니다(검은색은 0)
