Effets de flou SVG

<defs> et <filter>

Tous les filtres SVG sont définis dans <defs> est défini dans l'élément.<defs> L'élément est une abréviation de definitions, qui contient des définitions d'éléments spéciaux (par exemple, les filtres).

<filter> L'élément est utilisé pour définir les filtres SVG.<filter> L'élément a un attribut id obligatoire, utilisé pour identifier le filtre. Ensuite, le graphique fait référence au filtre à utiliser.

SVG <feGaussianBlur>

Exemple 1

<feGaussianBlur> L'élément est utilisé pour créer un effet de flou :

Voici le code SVG :

<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>

Essayez-le vous-même

Explication du code :

• L'attribut id de l'élément <filter> définit le nom unique du filtre
• L'élément <feGaussianBlur> définit un effet de flou
• in="SourceGraphic" est défini pour créer un effet sur tout l'élément
• L'attribut stdDeviation définit la quantité de flou
• L'attribut filter de l'élément <rect> lie cet élément au filtre "f1"