SVG Filtres

Les filtres SVG sont une puissante technologie d'effets graphiques qui peut être utilisée pour obtenir divers effets visuels, tels que le flou, l'ombre, l'éclairage, etc.

Les filtres peuvent être appliqués à des éléments graphiques SVG, tels que des rectangles, des cercles, des chemins, etc., ainsi qu'à des éléments de texte SVG, leur donnant différentes apparences et effets.

Syntaxe de base

Les filtres SVG utilisent généralement l'<filter>élément pour se définir, et sont appliqués via l'filterattribut aux éléments cibles.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义滤镜 -->
  <filter id="filter_id">
    <!-- 滤镜效果 -->
  </filter>
  
  <!-- 应用滤镜的目标元素 -->
  <rect x="50" y="50" width="100" height="80" filter="url(#filter_id)" />
</svg>

Effets de filtre

Les filtres SVG peuvent produire une variété d'effets. Les effets de filtre courants incluent :

• Flou: crée un effet de flou sur l'image, en utilisant le<feGaussianBlur>élément.

• Ombre: ajoute un effet d'ombre à l'image, en utilisant le<feDropShadow>élément.

• Réglage de la luminosité et du contraste: ajuste la luminosité et le contraste de l'image, en utilisant le<feComponentTransfer>élément.

• Matrice de couleurs: modifie la couleur de l'image via des opérations de matrice de couleurs, en utilisant le<feColorMatrix>élément.

• Mode de fusion: fusionne deux images ensemble, en utilisant le<feBlend>élément.

Le code suivant définit un filtre de flou, puis l'applique à un rectangle rempli de rouge, donnant au rectangle un effet de flou.

Les filtres SVG disponibles sont :

• feBlend - Filtre qui se combine avec les images
• feColorMatrix - Utilisé pour la conversion de filtre de couleur
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• feMerge
• feMorphology
• feOffset - Ombre du filtre
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight - Pour les filtres d'éclairage
• fePointLight - Pour les filtres d'éclairage
• feSpotLight - Pour les filtres d'éclairage

De plus, vous pouvez utiliser plusieurs filtres sur chaque élément SVG !

Notes

• Les filtres SVG peuvent être utilisés en combinaison. Dans un seul<filter>élément, plusieurs effets de filtre peuvent être définis.

• Chaque effet de filtre possède différents paramètres qui peuvent être ajustés, tels que le paramètre d'écart type du filtre de flou, le décalage et le rayon de flou du filtre d'ombre, etc.

• Les filtres SVG peuvent être utilisés avec des feuilles de style CSS, ou directement sur des éléments SVG en utilisantstyledes attributs pour la définition.

En utilisant les filtres SVG, vous pouvez ajouter divers effets visuels aux éléments graphiques SVG, les rendant plus vifs et variés.