SVG (Scalable Vector Graphics) propose différentes manières d'appliquer des filtres aux éléments, vous permettant de créer des effets visuels et d'améliorer l'apparence de vos graphiques. Voici quelques façons courantes d’utiliser les filtres en SVG :

1. <filter> élément :

   • Définissez un filtre en utilisant l'élément <filter> dans la section <defs> de votre SVG.
   • Spécifiez les primitives de filtre dans les <filter> éléments pour définir l'effet visuel.

    XML
    <svg>
     <defs>
       <filter id="myFilter" x="0" y="0" width="100%" height="100%">
         <!-- Define filter primitives here -->
       </filter>
     </defs>
     <!-- Apply the filter to an element using the filter attribute -->
     <rect width="100" height="100" style="fill: blue;" filter="url(#myFilter)" />
   </svg>
   

2. Filtrer les primitives :

   • Utilisez des primitives de filtre telles que <feGaussianBlur> , <feColorMatrix> , <feBlend> , etc. pour créer des effets visuels spécifiques.
   • Ajustez les attributs de ces primitives pour contrôler l'intensité et le comportement du filtre.

    XML
    <filter id="blurFilter">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
   

3. Appliquer plusieurs filtres :

   • Vous pouvez appliquer plusieurs filtres à un élément en les chaînant à l'aide de la fonction url() dans l'attribut filter .

    XML
    <rect width="100" height="100" style="fill: blue;" filter="url(#filter1) url(#filter2)" />
   

4. Utiliser avec CSS :

   • Appliquez des filtres à l'aide de CSS en référençant l'ID du filtre.

    css
    .myElement {
     filter: url(#myFilter);
   }
   

5. Filtres animés :

   • Vous pouvez animer les paramètres de filtre pour créer des effets dynamiques au fil du temps.

    XML
    <animate attributeName="stdDeviation" values="0;5;0" dur="2s" repeatCount="indefinite" />
   

6. Combinez des filtres avec des modes de fusion :

   • Combinez des filtres avec des modes de fusion pour obtenir des effets visuels complexes.

    XML
    <filter id="filter1">
     <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
   </filter>
   <filter id="filter2">
     <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 5 -2" />
   </filter>
   <rect width="100" height="100" style="fill: blue; mix-blend-mode: multiply;" filter="url(#filter1) url(#filter2)" />
   

N'oubliez pas que la prise en charge du navigateur pour certains filtres et effets peut varier. C'est donc une bonne idée de vérifier la compatibilité des filtres et fonctionnalités spécifiques que vous envisagez d'utiliser.