SVG filtrlar bilan tanishuv
SVG filtrlar
SVG filtrlari SVG grafikasiga maxsus effektlar qo‘shish uchun ishlatiladi.
Barcha SVG filtrlari <defs> elementi ichida belgilanadi. <defs> elementi "definitions" (ta’riflar) so‘zining qisqartmasi bo‘lib, maxsus elementlar (masalan, filtrlar) ta’riflarini o‘z ichiga oladi.
<filter> elementi SVG filtrini belgilash uchun ishlatiladi. <filter> elementida filtrni aniqlaydigan majburiy id atributi bor. So‘ngra grafika/rasm qaysi filtrdan foydalanishini shu identifikator orqali ko‘rsatadi.
Keyin <filter> elementi ichiga grafikaga qo‘llaniladigan bitta yoki bir nechta filtr effektini joylashtiramiz (filtr effekti elementlari ro‘yxatini quyidagi jadvalda ko‘ring).
Qisqa misol
Bu yerda SVG grafikasini xiralashtirish uchun <feGaussianBlur> filtridan foydalanamiz:
SVG kodi quyidagicha:
Misol
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>
O‘zingiz sinab ko‘ring »
SVG filtr effekti elementlari
SVG’da mavjud filtrlar:
| Nomi | Tavsif |
|---|---|
| <feBlend> | Ikki grafikani ma’lum aralashtirish rejimi (blending mode) bo‘yicha birlashtiradi |
| <feColorMatrix> | Ranglarni transformatsiya matritsasi asosida o‘zgartiradi |
| <feComponentTransfer> | Har bir piksel ma’lumotlarini komponentlar bo‘yicha qayta moslaydi. Yorqinlik, kontrast, rang balansi va hokazolarni sozlashi mumkin |
| <feComposite> | Ikki kiruvchi rasmni kompozitsiya amali yordamida rasm fazosida piksel darajasida birlashtiradi |
| <feConvolveMatrix> | Matritsali konvolyutsiya filtri effektini qo‘llaydi (bunga xiralashtirish, chegaralarni aniqlash, keskinlashtirish, bo‘rttirish va qirralarni qiyalash kiradi) |
| <feDiffuseLighting> | Alfa kanalidan relyef xaritasi (bump map) sifatida foydalanib grafikani yoritadi |
| <feDisplacementMap> | in atributidagi rasmni siljitish uchun in2 atributidagi grafikaning piksel qiymatlaridan foydalanadi |
| <feDistantLight> | Yoritish filtri primitivi (<feDiffuseLighting> yoki <feSpecularLighting>) ichida ishlatiladigan uzoqdagi yorug‘lik manbasini belgilaydi |
| <feDropShadow> | Grafikaning tushuvchi soyasini (drop shadow) yaratadi |
| <feFlood> | Filtr quyi hududini flood-color va flood-opacity atributlari belgilagan rang va shaffoflik bilan to‘ldiradi |
| <feGaussianBlur> | Grafikani xiralashtiradi |
| <feImage> | Grafika ma’lumotlarini tashqi manbadan oladi va piksel ma’lumotlarini natija sifatida taqdim etadi |
| <feMerge> | Kiruvchi grafika qatlamlarini aralashtiradi (filtr effektlarini ketma-ket emas, bir vaqtda qo‘llaydi) |
| <feMergeNode> | Boshqa filtr natijasini olib, uni ota element <feMerge> tomonidan qayta ishlanishiga uzatadi |
| <feMorphology> | Grafikani ingichkalashtiradi yoki kengaytiradi (qalinlashtirish yoki ingichkalashtirish effektlari uchun) |
| <feOffset> | Kiruvchi grafikani siljitadi |
| <fePointLight> | Nuqtaviy yorug‘lik effektini yaratish imkonini beruvchi yorug‘lik manbasini belgilaydi |
| <feSpecularLighting> | Alfa kanalidan relyef xaritasi (bump map) sifatida foydalanib manba grafikani yoritadi |
| <feSpotLight> | Projektor (spotlight) yorug‘ligi effektini yaratish imkonini beruvchi yorug‘lik manbasini belgilaydi |
| <feTile> | Maqsadli to‘rtburchakni kiruvchi grafikaning takrorlanuvchi naqshi bilan to‘ldiradi |
| <feTurbulence> | Perlin turbulentlik funksiyasi yordamida grafika yaratadi |
Maslahat: Har bir SVG elementiga bir nechta filtr effektini qo‘llashingiz mumkin!
Keyingi boblarda mavjud filtr effektlarining faqat kichik bir qismini namoyish qilamiz — bu sizga SVG yordamida nimalar qilish mumkinligi haqida tasavvur beradi!
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!