CSS3 可以對 SVG 元素套用陰影嗎？

CSS3 SVG 投影

是否可以使用 CSS3 將投影應用於 SVG？

可以，使用CSS 過濾器屬性，即受webkit 瀏覽器、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，可以使用這個polyfill：

// 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中文網其他相關文章！