Effets de flou SVG
Description des filtres SVG
Tous les filtres SVG sont définis à l'intérieur d'un élément <defs>. L'élément <defs> est l'abréviation de « definitions ». Il contient la définition d'éléments spécifiques tels que les filtres.
L'élément <filter> définit un filtre SVG. Cet élément possède un attribut id (obligatoire) qui identifie le filtre. L'élément <filter> n'est pas rendu directement. Son seul usage est de pouvoir être référencé via l'attribut filter dans SVG et la fonction url() dans CSS.
Chaque élément <filter> contient différents éléments de filtre en tant qu'enfants. Ces primitives de filtre effectuent une opération graphique essentielle sur une ou plusieurs entrées et ne produisent qu'un seul résultat. Outre l'utilisation du résultat d'autres primitives comme entrée, une primitive de filtre peut également accepter d'autres entrées telles que SourceGraphic et SourceAlpha.
Tous les éléments de filtre contiennent le préfixe fe, qui signifie « effet de filtre ».
Il existe actuellement 17 primitives de filtre définies dans la spécification des filtres SVG.
Dans notre exemple, nous utilisons l'élément <feGaussianBlur> pour créer un effet de flou.
Exemple de création d'un effet de flou :
Exemple de création d'un effet de flou
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="150" height="150">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Explication du code :
- L'attribut id de l'élément
<filter>spécifie un nom unique pour le filtre. - L'effet de flou est spécifié avec l'élément
<feGaussianBlur>. - La partie in="SourceGraphic" spécifie que l'effet est créé pour l'élément entier.
- L'attribut stdDeviation spécifie la quantité de flou.
- L'attribut filter de l'élément
<rect>lie l'élément au filtre "filter".
Pratique
Quelles sont les fonctions des attributs stdDeviation et in dans le filtre SVG 'feGaussianBlur' ?