SVG Effet de flou

L'effet de flou en SVG peut être obtenu grâce à l'<feGaussianBlur>élément, qui utilise l'algorithme de flou gaussien pour flouter l'image.

Les effets de flou peuvent être utilisés pour créer divers effets visuels tels que des ombres douces, une profondeur de champ, des arrière-plans flous, et bien plus encore.

<feGaussianBlur>Élément :

<feGaussianBlur>L'élément est utilisé pour effectuer un flou gaussien sur une image. Il possède deux paramètres principaux :

  • stdDeviation: Spécifie l'écart-type du flou gaussien. Plus l'écart-type est grand, plus le flou est fort. Un ou deux nombres peuvent être utilisés pour spécifier l'écart-type dans les directions horizontale et verticale respectivement. Si un seul nombre est donné, les écarts-types horizontal et vertical sont identiques.

  • in: Spécifie l'image d'entrée, généralementSourceGraphic, qui représente l'élément cible lui-même auquel l'effet de filtre est appliqué.

Le code suivant définit un filtre de flou, puis l'applique à un rectangle rempli de rouge, ce qui fait apparaître le rectangle flou. stdDeviation="5" signifie que l'écart-type dans les directions horizontale et verticale est 5, c'est-à-dire que la quantité de flou est de 5 pixels.

Exemple

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Définir le filtre de flou -->
  <filter id="blur_filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
 
  <!-- Le rectangle auquel le filtre de flou est appliqué -->
  <rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blur_filter)" />
</svg>

Exemple 1

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

fegaussianblur

Voici le code SVG :

Exemple

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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 »

Cliquez pour voir :。

Explication du code :

  • L'attribut id de l'élément <filter> définit un nom unique pour le filtre.
  • L'élément <feGaussianBlur> définit l'effet de flou.
  • La partie in="SourceGraphic" définit que l'effet est créé à partir de l'image entière.
  • L'attribut stdDeviation définit la quantité de flou.
  • L'attribut filter de l'élément <rect> est utilisé pour lier l'élément au filtre "f1".

Notes

  • Vous pouvez appliquer l'effet de flou à n'importe quel élément graphique SVG, y compris des rectangles, des cercles, des chemins, etc.

  • Les paramètres de l'effet de floustdDeviationpeuvent être ajustés selon les besoins pour obtenir un niveau de flou approprié.

  • Les effets de flou peuvent être combinés avec d'autres effets de filtre, tels que les ombres, les modes de fusion, etc.

En utilisant la<feGaussianBlur>élément, vous pouvez ajouter des effets de flou aux éléments graphiques SVG, leur donnant un aspect doux et flou, permettant ainsi d'obtenir divers effets visuels.

Autres extensions