SVG tushuvchi soya 2
SVG <feOffset>
<feOffset> filtri ham tushuvchi soya effektlarini yaratish uchun ishlatiladi. G‘oya shundan iboratki, SVG grafikasini olib, uni xy tekisligida biroz siljitamiz.
<feOffset> va <feBlend>
Birinchi misolda to‘rtburchak siljitiladi (<feOffset> yordamida), so‘ngra asl nusxa siljitilgan rasm ustiga aralashtiriladi (<feBlend> yordamida):
SVG kodi quyidagicha:
Misol
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<filter>elementiningidatributi filtr uchun yagona nom belgilaydi- Siljitish effekti
<feOffset>elementi bilan belgilanadi in="SourceGraphic"effekt butun element uchun yaratilishini belgilaydidxatributi x o‘qi bo‘ylab siljishni ko‘rsatadidyatributi y o‘qi bo‘ylab siljishni ko‘rsatadi<feBlend>elementi ikki grafikani ma’lum aralashtirish rejimi bo‘yicha birlashtiradiin2atributi aralashtirish amali uchun ikkinchi rasmni belgilaydi<rect>elementiningfilteratributi elementni "f1" filtriga bog‘laydi
Rasmni <feGaussianBlur> bilan xiralashtirish
Endi siljitilgan rasmni xiralashtirish mumkin (<feGaussianBlur> yordamida):
SVG kodi quyidagicha:
Misol
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f2" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<feGaussianBlur>elementiningstdDeviationatributi xiralashtirish miqdorini belgilaydi
Soyani qora qilish
Endi soyani qora qilamiz:
SVG kodi quyidagicha:
Misol
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f3" width="120" height="120">
<feOffset in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<feOffset>elementininginatributi"SourceAlpha"’ga o‘zgartiriladi; u xiralashtirish uchun butun RGBA piksel o‘rniga faqat alfa kanalidan foydalanadi
Soyani rang matritsasi sifatida qayta ishlash
Endi <feColorMatrix> elementi yordamida soyani rang matritsasi sifatida qayta ishlaymiz:
SVG kodi quyidagicha:
Misol
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f4" width="120" height="120">
<feOffset in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
O‘zingiz sinab ko‘ring »
Kod izohi:
<feColorMatrix>elementi ranglarni transformatsiya matritsasi asosida o‘zgartirish uchun ishlatiladi<feColorMatrix>elementiningtypeatributi matritsa amalining turini ko‘rsatadi.matrixkalit so‘zi qiymatlarning to‘liq 5x4 matritsasi belgilanishini bildiradi<feColorMatrix>elementiningvalueatributi matritsa turi uchun qiymatlarni belgilaydi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!