Web-grafika II (SVG) 9. gyakorlat Kereszty Gábor
Szűrők Szűrő elhelyezése az svg törzsön belül: … szűrő tulajdonságok … …alakzatok … A szűrő méretét és helyét az x, y, width és height attributumokkal tudjuk megadni. Több szűrő tulajdonság megadása esetén a bement az előző kimenete. Más esetben a result=“res” és in=“res” mezőkkel lehet ezt szabályozni.
feGaussianBlur - elmosás in: csak az alpha érték vagy a teljes grafika a bement sD: szám érték, ami megmondja az elmosás mértékét [0-∞)
Feladatok Hozz létre a virag.svg file-ban egy szűrőt, mely bementként az alfa csatornát használja. A szűrőt alkalmazd a virágra.
feOffset - eltolás in: input grafika dx, dy: x ill y irányban alkalmazott eltolás
feMerge, feMergeNode A feMerge-ben felsorolt szűrők eredményét helyezi egymásra, az első bemenete lesz legalul az utolsó legfölül. Tetszőlegesen sok feMergeNode megadható…
Feladatok Az előbb létrehozott árnyékot eltolva, és felhasználva az eredeti virágot, készíts árnyékolt virágot.
feImage - kép xlink:href: input kép lehet jpg, png vagy svg kiterjesztésű
Feladatok Az árnyékolt virág mögé helyezd el a hatter.jpg nevű képet háttérként szűrő segítségével.
feBlend - összemosás mode: normal – Az A látszik a B előtt multiply – A*B szorzat (világos szín csökken) screen – A+B-A*B (világos szín erősödik) darken – min(A,B) (sötétít) lighten – max(A,B) (világosít)
Feladatok Készíts egy piros téglalapot. Készíts egy hátteret a feImage segítségével. A téglalapra alkalmazd a feBlend szűrőt. Próbáld ki a feBlend különböző beállításait.
feComposite - kivágás Ami látszik - operator: in – A metszet B over – az A a B felett out – A/B atop – az A kép B-n belüli része és a B A-n kívüli része xor – A/B unió B/A arithmetic – k1*A*B+k2*A+k3*B+k4
Feladatok Az eredeti virag.svg-t használd, ahonnan kitörlöd a fill-opacity mezőket! Készíts két ábrát, ahol a háttérből kivágjuk a virág formát. Elsőben a háttér látszik a virág nélkül, a másodikban pedig ennek a negáltja legyen. (out, in)