Effets de flou SVG
<defs> et <filter>
Tous les filtres SVG Internet 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 <feGaussianBlur>
Exemple 1
L'élément <feGaussianBlur> est utilisé pour créer des effets de flou :
Voici le code SVG :
Exemple
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Explication du code :
- L'attribut id de l'élément <filter> définit un nom unique pour le filtre
- L'effet de flou est défini avec l'élément <feGaussianBlur>
- La partie in="SourceGraphic" définit que l'effet est créé pour l'élément entier
- L'attribut stdDeviation définit la quantité de flou
- L'attribut filter de l'élément <rect> relie l'élément au filtre "f1"