CSS3가 SVG 요소에 그림자를 적용할 수 있나요?

CSS3 SVG Drop Shadow

CSS3을 사용하여 SVG에 그림자를 적용할 수 있습니까?

예, CSS 필터 속성을 사용합니다. 웹킷 브라우저, Firefox 34 및 같은 최신 브라우저에서 지원됩니다. Edge.

구문

filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);

예

.shadow {
  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" />
</svg>

레거시 브라우저용 Polyfill

Firefox와 같은 브라우저의 경우 < 34, IE6, 다음 폴리필을 사용할 수 있습니다:

// Usage:
// $(element).cssShadow({horizontal-offset, vertical-offset, blur-radius, color});

$.fn.cssShadow = function(options) {
  // CSS syntax to include the units of the values
  var css = "-webkit-filter: drop-shadow("
    + options.horizontalOffset + "px "
    + options.verticalOffset + "px "
    + options.blurRadius + "px "
    + options.color
    + ");";

  // Applying the css
  return this.css({
    'filter': css,
    '-webkit-filter': css
  });
};

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