Can CSS3 Apply Drop Shadows to SVG Elements?

CSS3 SVG Drop Shadow

Is it possible to apply drop shadow to SVG using CSS3?

Yes, using the CSS filter property, which is supported by modern browsers like webkit browsers, Firefox 34 , and Edge.

Syntax

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

Example

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

You can also use this in SVG elements:

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

Polyfill for Legacy Browsers

For browsers like Firefox < 34, IE6 , you can use this 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
  });
};

The above is the detailed content of Can CSS3 Apply Drop Shadows to SVG Elements?. For more information, please follow other related articles on the PHP Chinese website!