Comment ajouter des ombres portées aux SVG en utilisant uniquement CSS ?

Comment créer des ombres portées pour les SVG à l'aide de CSS3

Est-il possible de créer des ombres portées pour des éléments SVG à l'aide de CSS3 ? Quelque chose comme :

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

Des discussions sur la création d'ombres à l'aide d'effets de filtre ont été rencontrées. Existe-t-il un exemple qui utilise uniquement CSS ? Vous trouverez ci-dessous un code fonctionnel dans lequel le style du curseur est appliqué de manière appropriée mais aucun effet d'ombre n'est présent. Comment obtenir l'effet d'ombre avec un minimum de code ?

svg .shadow {
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

Solution

Utiliser l'attribut CSS 'filter'.

Compatible avec les navigateurs Webkit, Firefox 34 et Edge.

Un polyfill est disponible pour prendre en charge FF < 34 et IE6 .

Mise en œuvre :

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

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!