SVG - filtry

SVG używa elementu <filter> do definiowania filtrów. Element <filter> używa atrybutu id, aby go jednoznacznie zidentyfikować. Filtry są definiowane w elementach <def>, a elementy graficzne odwołują się do nich poprzez ich identyfikatory.

SVG zapewnia bogaty zestaw filtrów. Poniżej znajduje się lista najczęściej używanych filtrów.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - filtr cieni
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Deklaracja

Poniżej znajduje się deklaracja składni <filter>element. Pokazaliśmy tylko główne atrybuty.

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

Atrybuty

Sr.No.	Nazwa i opis
1	filterUnits- jednostki definiujące region efektu filtra. Określa układ współrzędnych dla różnych wartości długości w filtrze oraz dla atrybutów definiujących obszar podrzędny filtru. Jeśli filterUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu „filter”. Jeśli filterUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach ramki ograniczającej elementu odniesienia w miejscu, w którym jest używany element „filter”. Wartość domyślna to userSpaceOnUse.
2	primitiveUnits- jednostki definiujące region efektu filtra. Określa układ współrzędnych dla różnych wartości długości w filtrze oraz dla atrybutów definiujących obszar podrzędny filtru. Jeśli filterUnits = "userSpaceOnUse", wartości reprezentują wartości w bieżącym układzie współrzędnych użytkownika obowiązującym w momencie użycia elementu „filter”. Jeśli filterUnits = "objectBoundingBox", wartości reprezentują wartości w ułamkach lub procentach ramki ograniczającej elementu odniesienia w miejscu, w którym jest używany element „filter”. Wartość domyślna to userSpaceOnUse.
3	x- współrzędna osi x ramki ograniczającej filtr. Pokonanie wynosi 0.
4	y- współrzędna osi Y ramki ograniczającej filtr. Wartość domyślna to 0.
5	width- szerokość ramki ograniczającej filtr. Wartość domyślna to 0.
6	height- wysokość ramki ograniczającej filtr. Wartość domyślna to 0.
7	filterRes - liczby reprezentujące obszary filtrów.
8	xlink:href - używany w odniesieniu do innego filtra.

Przykład

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>

Dwa elementy <filter> zdefiniowane jako filtr1 i filtr2.
Efekt filtra feGaussianBlur definiuje efekt rozmycia z ilością rozmycia za pomocą odchylenia std.
in = "SourceGraphic" określa, że efekt ma zastosowanie do całego elementu.
Efekt filtra feOffset służy do tworzenia efektu cienia. in = „SourceAlpha” określa, że efekt ma zastosowanie do części alfa grafiki RGBA.
Elementy <rect> połączyły filtry za pomocą atrybutu filtra.

Wynik

Otwórz textSVG.htm w przeglądarce internetowej Chrome. Możesz użyć przeglądarki Chrome / Firefox / Opera, aby wyświetlić obraz SVG bezpośrednio, bez żadnej wtyczki. Internet Explorer 9 i nowsze wersje obsługują również renderowanie obrazu SVG.

Filtruj z efektem cienia

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

Wynik