CSS3 peut-il appliquer des ombres portées aux éléments SVG ?

Ombre portée CSS3 SVG

Est-il possible d'appliquer une ombre portée au SVG en utilisant CSS3 ?

Oui, en utilisant la propriété de filtre CSS, qui est pris en charge par les navigateurs modernes tels que les navigateurs Webkit, Firefox 34 et Edge.

Syntaxe

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

Exemple

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

Vous pouvez également l'utiliser dans les éléments SVG :

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

Polyfill pour les navigateurs hérités

Pour les navigateurs comme Firefox < 34, IE6, vous pouvez utiliser ce 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
  });
};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!