SVG - Filtri

SVG utilizza l'elemento <filter> per definire i filtri. L'elemento <filter> utilizza un attributo id per identificarlo in modo univoco. I filtri sono definiti all'interno degli elementi <def> e quindi sono referenziati dagli elementi grafici tramite i loro ID.

SVG fornisce un ricco set di filtri. Di seguito è riportato l'elenco dei filtri comunemente utilizzati.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - filtro per ombre esterne
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Dichiarazione

Di seguito è riportata la dichiarazione della sintassi di <filter>elemento. Abbiamo mostrato solo gli attributi principali.

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

Attributi

Sr.No. Nome e descrizione
1 filterUnits- unità per definire la regione dell'effetto del filtro. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del filtro e per gli attributi che definiscono la sottoregione del filtro. Se filterUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in vigore nel momento in cui viene utilizzato l'elemento "filtro". Se filterUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "filtro". L'impostazione predefinita è userSpaceOnUse.
2 primitiveUnits- unità per definire la regione dell'effetto del filtro. Specifica il sistema di coordinate per i vari valori di lunghezza all'interno del filtro e per gli attributi che definiscono la sottoregione del filtro. Se filterUnits = "userSpaceOnUse", i valori rappresentano i valori nel sistema di coordinate utente corrente in vigore nel momento in cui viene utilizzato l'elemento "filtro". Se filterUnits = "objectBoundingBox", i valori rappresentano i valori in frazioni o percentuali del riquadro di delimitazione sull'elemento di riferimento in posizione nel momento in cui viene utilizzato l'elemento "filtro". L'impostazione predefinita è userSpaceOnUse.
3 x- Coordinata dell'asse x del riquadro di delimitazione del filtro. Il valore predefinito è 0.
4 y- Coordinata dell'asse y del riquadro di delimitazione del filtro. L'impostazione predefinita è 0.
5 width- larghezza del riquadro di delimitazione del filtro. L'impostazione predefinita è 0.
6 height- altezza del box di delimitazione del filtro. L'impostazione predefinita è 0.
7 filterRes - numeri che rappresentano le regioni del filtro.
8 xlink:href - utilizzato per fare riferimento a un altro filtro.

Esempio

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>

  • Due elementi <filter> definiti come filtro1 e filtro2.

  • L'effetto del filtro feGaussianBlur definisce l'effetto di sfocatura con la quantità di sfocatura che utilizza deviazione std.

  • in = "SourceGraphic" definisce che l'effetto è applicabile all'intero elemento.

  • L'effetto del filtro feOffset viene utilizzato per creare l'effetto ombra. in = "SourceAlpha" definisce che l'effetto è applicabile per la parte alfa della grafica RGBA.

  • Gli elementi <rect> collegavano i filtri utilizzando l'attributo filter.

Produzione

Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.

Filtro con effetto ombra

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

Produzione

Apri textSVG.htm nel browser web Chrome. Puoi utilizzare Chrome / Firefox / Opera per visualizzare l'immagine SVG direttamente senza alcun plug-in. Internet Explorer 9 e versioni successive supportano anche il rendering di immagini SVG.