Ombres portées SVG

<defs> et <filter>

Tous les filtres SVG sont définis dans un élément <defs>. L'élément <defs> est l'abréviation de définitions et contient la définition d'éléments spéciaux (tels que des filtres).

L'élément <filter> est utilisé pour définir un filtre SVG. L'élément <filter> a un attribut id obligatoire qui identifie le filtre. Le graphique pointe alors vers le filtre à utiliser.

SVG <feOffset>

Exemple 1

L'élément <feOffset> est utilisé pour créer des effets d'ombre portée. L'idée est de prendre un graphique SVG (image ou élément) et de le déplacer un peu dans le plan xy.

Le premier exemple décale un rectangle (avec <feOffset>), puis fusionne l'original au-dessus de l'image décalée (avec <feBlend>) :

Voici le code SVG :

Explication du code :

• L'attribut id de l'élément <filter> définit un nom unique pour le filtre
• L'attribut filter de l'élément <rect> relie l'élément au filtre "f1"

Exemple 2

Maintenant, l'image décalée peut être floutée (avec <feGaussianBlur>) :

Voici le code SVG :

Explication du code :

• L'attribut stdDeviation de l'élément <feGaussianBlur> définit la quantité de flou

Exemple 3

Maintenant, rendez l'ombre noire :

Voici le code SVG :

Explication du code :

• L'attribut in de l'élément <feOffset> est changé en "SourceAlpha" qui utilise le canal Alpha pour le flou au lieu du pixel RGBA entier

Exemple 4

Maintenant, traitez l'ombre comme une couleur :

Voici le code SVG :

Explication du code :

• Le filtre <feColorMatrix> est utilisé pour transformer les couleurs de l'image décalée plus près du noir. Les trois valeurs de '0.2' dans la matrice sont toutes multipliées par les canaux rouge, vert et bleu. Réduire leurs valeurs rapproche les couleurs du noir (le noir vaut 0)