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

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.