CSS만 사용하여 SVG에 그림자를 추가하는 방법은 무엇입니까?

CSS3을 사용하여 SVG용 그림자를 만드는 방법

CSS3을 사용하여 SVG 요소에 그림자를 만드는 것이 가능합니까? 다음과 같습니다:

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

필터 효과를 사용하여 그림자를 만드는 것에 대한 논의가 있었습니다. CSS만 사용하는 예가 있나요? 아래는 커서 스타일이 적절하게 적용되었지만 그림자 효과가 없는 기능 코드입니다. 최소한의 코드로 어떻게 그림자 효과를 얻을 수 있나요?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

해결책

CSS 'filter' 속성을 사용하세요.

웹킷 브라우저, Firefox와 호환 가능 34 및 Edge.

폴리필은 FF < 34 및 IE6.

구현:

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

위 내용은 CSS만 사용하여 SVG에 그림자를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!