SVG 튜토리얼

SVG 요소

SVG 그림자

SVG에서 그림자 효과를 표시하려면 <feOffset> 요소를 사용합니다. 그림자 효과를 구현하려면 SVG 그래픽을 가져와서 xy 평면에서 조금 이동시킵니다. Internet Explorer와 Safari는 SVG 필터를 지원하지 않습니다!

온라인 예제

아래는 파란색 배경 그림자 효과를 구현합니다:

示例

<svg　height="250"　width="250">
　　<defs>
　　　　<filter　id="p1"　x="0"　y="0"　width="200%"　height="200%">
　　　　　　<feOffset　result="offOut"　in="SourceGraphic"　dx="20"　dy="20"></feOffset>
　　　　　　<feGaussianBlur　result="blurOut"　in="offOut"　stdDeviation="10></feGaussianBlur>
　　　　　　<feBlend　in="SourceGraphic"　in2="blurOut"　mode="normal"></feBlend>
　　　　</filter>
　　</defs>
　　<rect　width="90"　height="90"　stroke="blue"　stroke-width="3"　fill="purple"　filter="url(#p1)"　/>
　　</svg>

테스트를 보고‹/›

주의: Internet Explorer 9과 이전 버전에서 SVG 필터를 지원하지 않습니다.

실행된 결과는 다음과 같습니다:

용법 설명

<filter>　의 id 속성이 모델의 유일한 이름을 정의합니다.
<rect>요소의 filter 속성은 요소를 " p1”필터.

제작하여 검은한 그림자를 만들기

示例

<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>

테스트를 보세요 ‹/›

실행된 결과는 다음과 같습니다:

주의: Internet Explorer 9과 이전 버전에서 SVG 필터를 지원하지 않습니다.

SVG 예제 모음 SVG 흐림 효과