CSS를 사용하여 SVG에 그림자를 어떻게 추가할 수 있나요?

CSS를 사용하여 SVG에 그림자를 적용할 수 있나요?

CSS를 사용하면 그림자를 포함하여 웹 페이지의 요소에 다양한 효과를 적용할 수 있습니다. 그러나 box-shadow 속성은 SVG 요소에 대해 직접 지원되지 않습니다.

SVG에 대해 그림자 효과를 얻으려면 CSS 필터 속성을 사용할 수 있습니다. 이 속성은 웹킷 브라우저, Firefox 34 및 Edge를 포함한 최신 브라우저에서 지원됩니다. Firefox 버전 34 및 IE6 이하에 대한 지원을 제공하는 폴리필도 있습니다.

필터 속성을 사용하여 SVG에 그림자를 추가하는 방법은 다음과 같습니다.

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

다음을 수행할 수 있습니다. 직사각형, 원, 경로와 같은 다양한 SVG 요소에 이 필터를 사용하세요. 예:

<svg>
  <rect class="shadow" x="10" y="10" width="200" height="100" fill="#bada55"></rect>
</svg>

이렇게 하면 그림자가 있는 직사각형이 생성됩니다. 그림자 기능의 값을 수정하여 그림자의 위치, 흐림, 색상을 조정할 수 있습니다.

위 내용은 CSS를 사용하여 SVG에 그림자를 어떻게 추가할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!