Web-grafika II (SVG) 9. gyakorlat Kereszty Gábor.

Az előadások a következő témára: "Web-grafika II (SVG) 9. gyakorlat Kereszty Gábor."— Előadás másolata:

1 Web-grafika II (SVG) 9. gyakorlat Kereszty Gábor

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

3 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-∞)

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

5 feOffset - eltolás in: input grafika dx, dy: x ill y irányban alkalmazott eltolás

6 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ó…

7 Feladatok Az előbb létrehozott árnyékot eltolva, és felhasználva az eredeti virágot, készíts árnyékolt virágot.

8 feImage - kép xlink:href: input kép lehet jpg, png vagy svg kiterjesztésű

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

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

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

12 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

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