SVG - Filtres

SVG utilise l'élément <filter> pour définir les filtres. L'élément <filter> utilise un attribut id pour l'identifier de manière unique. Les filtres sont définis dans les éléments <def> puis sont référencés par les éléments graphiques par leurs identifiants.

SVG fournit un riche ensemble de filtres. Voici la liste des filtres couramment utilisés.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - filtre pour les ombres portées
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Déclaration

Voici la déclaration de syntaxe de <filter>élément. Nous n'avons montré que les principaux attributs.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Les attributs

N ° Sr. Nom et description
1 filterUnits- unités pour définir la région d'effet de filtre. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le filtre et pour les attributs définissant la sous-région de filtre. Si filterUnits = "userSpaceOnUse", les valeurs représentent des valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'filter' est utilisé. Si filterUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'filter' est utilisé. La valeur par défaut est userSpaceOnUse.
2 primitiveUnits- unités pour définir la région d'effet de filtre. Il spécifie le système de coordonnées pour les différentes valeurs de longueur dans le filtre et pour les attributs définissant la sous-région de filtre. Si filterUnits = "userSpaceOnUse", les valeurs représentent des valeurs dans le système de coordonnées utilisateur actuel en place au moment où l'élément 'filter' est utilisé. Si filterUnits = "objectBoundingBox", les valeurs représentent des valeurs en fractions ou en pourcentages de la boîte englobante sur l'élément de référence en place au moment où l'élément 'filter' est utilisé. La valeur par défaut est userSpaceOnUse.
3 x- coordonnée sur l'axe des x de la boîte englobante du filtre. Defeault est 0.
4 y- coordonnée sur l'axe y de la boîte englobante du filtre. La valeur par défaut est 0.
5 width- largeur de la boîte englobante du filtre. La valeur par défaut est 0.
6 height- hauteur de la boîte englobante du filtre. La valeur par défaut est 0.
sept filterRes - les nombres représentant les régions de filtre.
8 xlink:href - utilisé pour désigner un autre filtre.

Exemple

testSVG.htm 
<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

  • Deux éléments <filter> définis comme filter1 et filter2.

  • L'effet de filtre feGaussianBlur définit l'effet de flou avec la quantité de flou à l'aide de stdDeviation.

  • in = "SourceGraphic" définit que l'effet est applicable à l'ensemble de l'élément.

  • L'effet de filtre feOffset est utilisé pour créer un effet d'ombre. in = "SourceAlpha" définit que l'effet est applicable à la partie alpha des graphiques RGBA.

  • Les éléments <rect> ont lié les filtres à l'aide de l'attribut de filtre.

Production

Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.

Filtre avec effet d'ombre

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Production

Ouvrez textSVG.htm dans le navigateur Web Chrome. Vous pouvez utiliser Chrome / Firefox / Opera pour afficher l'image SVG directement sans aucun plugin. Internet Explorer 9 et supérieur prend également en charge le rendu d'image SVG.