Comment puis-je créer une ombre portée SVG à l'aide de CSS3 ?

Ombre portée SVG à l'aide de CSS3

Implémentation de l'ombre portée avec CSS3

Il est possible d'ajouter un effet d'ombre portée aux éléments SVG à l'aide de CSS3. Contrairement aux propriétés box-shadow ou -webkit-box-shadow précédentes, l'approche moderne implique l'utilisation de la propriété de filtre CSS.

Utilisation de la propriété de filtre CSS

Supporté par les navigateurs populaires comme webkit, Firefox 34 et Edge, la propriété de filtre CSS fournit une syntaxe dédiée pour les effets d'ombre portée :

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

Application de l'ombre portée Effet

Appliquez la propriété filter à votre élément SVG avec la classe ".shadow":

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

L'effet d'ombre portée sera appliqué à tout élément SVG avec la classe ".shadow" , y compris des images, des formes et des groupes. L'apparence de l'ombre peut être personnalisée en ajustant les valeurs dans la fonction de filtre.

Compatibilité entre navigateurs

Bien que la propriété de filtre à elle seule offre une excellente prise en charge, vous aurez peut-être besoin d'un polyfill pour les navigateurs plus anciens comme FF. &Lt ; 34 ou IE6. Les polyfills peuvent imiter le comportement de l'effet de filtre, garantissant ainsi la compatibilité sur un plus large éventail de navigateurs.

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!