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

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

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

2 Szinek, színátmenetek Szinek megadása: –Szín neve: aqua, blue, yellow –Hatjegyű hexadecimális: #rrggbb (00-ff) –Háromjegyű hexadecimális: #rgb (0-f) –rgb(r g b)0-255 vagy 0-100%

3 Lineáris színátmenet Lineáris színátmenet Ahol az offset értékben határozzuk meg, hogy hol legyen az adott szín a képzeletbeli szakaszon. Természetesen több „stop” is megadható. Felhasználása pedig a fent látható módon történik.

4 Feladatok Hozz létre egy 60*60-as négyzetet, amelynél a mintázat kékből sárgába megy át. Hozz létre egy 3 színből álló átmenetet, és tölts ki vele egy ellipszist.

5 Lineáris színátmenet 2 Lineáris színátmenet 2 Ahol a `név1`, egy már létező színátmenet azonosítója. Az x és y attribútumokkal pedig a színátmenet vezér-egyenesét lehet megadni. Egy további beállítási lehetőség: Ahol az ismétlés módját lehet megadni: –pad : a szélső színeket az alakzat széléig meghosszabbítja –repeat : megismétli a mintázatot –reflect : tükrözve ismétli meg a mintázatot

6 Lineáris színátmenet 3 Lineáris színátmenet 3 A színátmenetek megadási módjait ötvözni is lehet:

7 Feladatok Hozz létre egy két színből álló mintázatot. Ennek felhasználásával definiálj különböző irányú átmeneteket, és ezekkel tölts ki egymás mellett álló köröket. Legalább 4 mintázatot használj, de a szineket csak egy helyen add meg. Hozz létre egy két színű mintázatot. Az irányt meghatározó vektor végpontjainak koordinátái legyenek (20,20) és (60,60). Használd fel ezt a mintázatot egymás melletti négyzetek kitöltéséhez úgy, hogy a spreadMethod értéke minden esetben más legyen.

8 Sugaras színátmenet Sugaras színátmenet Ahol a cx, cy a kör középpontja és r a sugara, az fx, fy pedig a fókuszpont helye. Minden érték az objektum befoglalókeretének százalékértékében értendők. Az összes lineáris színátmenetnél tanult attribútum hasonlóan működik itt is. /stop offset, id, spreadMethod/

9 Feladat Hozz létre egy tetszőleges két színből álló körkörös mintázatot. Ennek felhasználásával definiálj különböző fókusz-, ill. középpontú átmeneteket. Használd fel ezeket egymás melletti téglalapok kitöltéséhez. Legalább 4 mintázatot használj, de a szineket csak egy helyen add meg.

10 Mintázatok Mintázatok …mintázat… patternUnits : csempék közötti térköz megadása objectBoundingBox : x, y, w és h méretek megadása a befoglaló objektum %-ában. userSpaceOnUse : x, y, w és h méretét normál módban adjuk meg. viewBox : ha a pU értéke oBB, akkor azon belül módosítja a minta helyét

11 Feladat Használd a fenti objektumokat! Hozz létre egy 600*200- as koordinátarendszert. Rajzolj 3 téglalapot a következő méretekkel (x,y,w,h): (10,10,100,100), (120,10,50,100), (150,10,150,150). A mintázat szélessége és magassága egyaránt 20% legyen, a patternUnits értéke pedig objectBoundingBox.

12 Feladatok Módosítsd az előző leírást úgy, hogy 20 egység legyen a szélesség/magasság, valamint a patternUnits értéke userSpaceOnUse Módosítsd az első leírást úgy, hogy a viewBox értékeként a „0 0 50 50”-et állítod be.

13 Mintázatok Mintázatok …mintázat… patternContentUnits : itt állítjuk be, hogy magát a mintát milyen módon adtuk meg objectBoundingBox : méretek megadása a befoglaló téglalap %-ában userSpaceOnUse : alapértelmezett

14 Feladat Feladat A mintázatot is lehet mintázni! Készíts egy zöld négyzetet, valamint két vonalból annak átlóit. Hozz létre így egy belső mintázatot, melynek szélessége/magassága a kitöltendő alakzat 50%-a. Készíts egy második mintát, mely piros körből áll, és a kitöltése a belső minta. Ezzel a második mintával töltsd ki a téglalapokat.

15 Kitöltés transzformációk További lehetőségek, hogy a kitöltést el lehet forgatni (rotate), vagy meg lehet dönteni (skewX, skewY) Megj: Az eltolás és skálázás megadását már tárgyaltuk.