Comment puis-je créer des ombres portées SVG à l'aide de filtres CSS3 ?

Ombre portée SVG à l'aide de CSS3

Créer des ombres portées pour les éléments SVG à l'aide de CSS3 peut sembler déroutant, surtout compte tenu du manque de prise en charge directe des éléments SVG traditionnels. Propriétés box-shadow et -webkit-box-shadow. Cependant, il existe une solution de contournement viable en utilisant les filtres CSS.

Utilisation des filtres CSS

Les filtres CSS permettent d'appliquer des effets visuels aux éléments SVG. Pour créer une ombre portée à l'aide de cette méthode, vous pouvez utiliser la propriété filter avec la fonction drop-shadow().

Syntaxe

.element {
  filter: drop-shadow(horizontal-offset vertical-offset blur-radius color);
}

Exemple

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

Compatibilité

Le Le filtre drop-shadow() est pris en charge dans les navigateurs modernes, notamment :

• Navigateurs Webkit
• Firefox 34
• Edge

Polyfill

Pour les navigateurs qui ne prennent pas en charge drop-shadow() filtre, vous pouvez utiliser un polyfill. Un polyfill populaire est [CSS Shadow](https://github.com/mdn/css-shadow), qui prend en charge Firefox

Application de l'ombre portée

Vous pouvez appliquer l'ombre portée à n'importe quel élément SVG. Ajoutez simplement la classe d'ombre à l'élément :

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

Conclusion

À l'aide de filtres CSS, vous pouvez créer des ombres portées pour les éléments SVG avec un minimum d'effort de codage. Cette technique est compatible avec les navigateurs modernes et prend en charge le rendu multi-navigateurs à l'aide d'un polyfill.

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!