CSS3 필터를 사용하여 SVG 그림자를 어떻게 만들 수 있나요?

CSS3을 사용하여 SVG 드롭 섀도우

CSS3을 사용하여 SVG 요소에 대한 드롭 섀도우를 만드는 것은 혼란스러워 보일 수 있습니다. 특히 기존 형식에 대한 직접적인 지원이 부족하기 때문에 더욱 그렇습니다. box-shadow 및 -webkit-box-shadow 속성. 그러나 CSS 필터를 사용하면 실행 가능한 해결 방법이 있습니다.

CSS 필터 사용

CSS 필터는 SVG 요소에 시각 효과를 적용하는 방법을 제공합니다. 이 방법을 사용하여 그림자를 만들려면 drop-shadow()와 함께 필터 속성을 사용할 수 있습니다. 함수.

구문

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

예

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

호환성

drop-shadow() 필터는 최신 버전에서 지원됩니다. 다음을 포함한 브라우저:

• Webkit 브라우저
• Firefox 34
• Edge

Polyfill

drop-shadow() 필터를 지원하지 않는 브라우저의 경우, 폴리필을 사용할 수 있습니다. 널리 사용되는 폴리필 중 하나는 Firefox < 34 및 IE6.

그림자 적용

모든 SVG 요소에 그림자를 적용할 수 있습니다. 요소에 섀도우 클래스를 추가하기만 하면 됩니다.

결론
CSS 필터를 사용하면 최소한의 코딩 노력으로 SVG 요소에 대한 그림자를 만들 수 있습니다. 이 기술은 최신 브라우저와 호환되며 폴리필을 사용한 크로스 브라우저 렌더링을 지원합니다.
위 내용은 CSS3 필터를 사용하여 SVG 그림자를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!