SVG - Filter

SVG menggunakan elemen <filter> untuk menentukan filter. Elemen <filter> menggunakan atribut id untuk mengidentifikasinya secara unik. Filter didefinisikan dalam elemen <def> dan kemudian direferensikan oleh elemen grafis dengan id-nya.

SVG menyediakan sekumpulan filter yang kaya. Berikut adalah daftar filter yang biasa digunakan.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - filter untuk bayangan jatuh
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Pernyataan

Berikut ini adalah deklarasi sintaks <filter>elemen. Kami hanya menunjukkan atribut utama.

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

Atribut

Sr.No.	Nama & Deskripsi
1	filterUnits- unit untuk menentukan wilayah efek filter. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam filter dan untuk atribut yang menentukan subkawasan filter. Jika filterUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'filter' digunakan. Jika filterUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'filter' digunakan. Default-nya adalah userSpaceOnUse.
2	primitiveUnits- unit untuk menentukan wilayah efek filter. Ini menentukan sistem koordinat untuk berbagai nilai panjang dalam filter dan untuk atribut yang menentukan subkawasan filter. Jika filterUnits = "userSpaceOnUse", nilai mewakili nilai dalam sistem koordinat pengguna saat ini pada saat elemen 'filter' digunakan. Jika filterUnits = "objectBoundingBox", nilai mewakili nilai dalam pecahan atau persentase dari kotak pembatas pada elemen referensi di tempat pada saat elemen 'filter' digunakan. Default-nya adalah userSpaceOnUse.
3	x- koordinat sumbu x kotak pembatas filter. Defeault adalah 0.
4	y- koordinat sumbu y dari kotak pembatas filter. Default-nya adalah 0.
5	width- lebar kotak pembatas filter. Default-nya adalah 0.
6	height- tinggi kotak pembatas filter. Default-nya adalah 0.
7	filterRes - angka yang mewakili daerah filter.
8	xlink:href - digunakan untuk merujuk ke filter lain.

Contoh

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>

Dua elemen <filter> didefinisikan sebagai filter1 dan filter2.
Efek filter feGaussianBlur mendefinisikan efek blur dengan jumlah blur menggunakan stdDeviation.
in = "SourceGraphic" mendefinisikan bahwa efek berlaku untuk seluruh elemen.
Efek filter feOffset digunakan untuk membuat efek bayangan. in = "SourceAlpha" mendefinisikan bahwa efek dapat diterapkan untuk bagian alpha dari grafik RGBA.
Elemen <benar> menautkan filter menggunakan atribut filter.

Keluaran

Buka textSVG.htm di browser web Chrome. Anda dapat menggunakan Chrome / Firefox / Opera untuk melihat gambar SVG secara langsung tanpa plugin apa pun. Internet Explorer 9 dan lebih tinggi juga mendukung rendering gambar SVG.

Filter dengan efek Shadow

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

Keluaran