Comment puis-je ajouter une ombre portée à un SVG à l'aide de CSS ?

Est-il possible d'appliquer une ombre portée à SVG à l'aide de CSS

CSS peut être utilisé pour appliquer divers effets aux éléments d'une page Web, y compris des ombres portées. Cependant, la propriété box-shadow n'est pas directement prise en charge pour les éléments SVG.

Pour obtenir un effet d'ombre portée pour SVG, vous pouvez utiliser la propriété de filtre CSS. Cette propriété est prise en charge par les navigateurs modernes, notamment les navigateurs Webkit, Firefox 34 et Edge. Il existe également un polyfill disponible qui prend en charge les versions de Firefox inférieures à 34 et IE6.

Voici comment utiliser la propriété filter pour ajouter une ombre portée à un SVG :

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

Vous pouvez utilisez ce filtre sur divers éléments SVG, tels que le rect, le cercle et le chemin. Par exemple :

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

Cela créera un rectangle avec une ombre portée. Vous pouvez ajuster la position, le flou et la couleur de l'ombre en modifiant les valeurs dans la fonction ombre portée.

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!