150 likes | 234 Views
Web-grafika II (SVG) 3 . gyakorlat. Kereszty Gábor. S zi n ek, 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%. Lineáris színá tmenet. < linearGradient id =“ név ”>
E N D
Web-grafika II (SVG)3. gyakorlat Kereszty Gábor
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%
Lineáris színátmenet <linearGradient id=“név”> <stop offset=“x%” style=“stop-color: szín”/> </linearGradient> <circle cx=“x” cy=“y” r=“r” style=“fill: url(# név)”/> 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.
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.
Lineáris színátmenet 2 <linearGradient id=“név2” xlink:href=“#név1” x1=“x1%” y1=“y1%” x2=“x2%” y2=“y2%”/> 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: <linearGradient id=“név”xlink:href=“#név1” spreadMethod=“pad | repeat | reflect” /> 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
Lineáris színátmenet 3 A színátmenetek megadási módjait ötvözni is lehet: <linearGradient id=“név”xlink:href=“#név2” x1=“x1%” y1=“y1%” x2=“x2%” y2=“y2%” spreadMethod=“pad”> <stop offset=“x%” style=“stop-color: szín”/><stop offset=“y%” style=“stop-color: szín2”/> </linearGradient>
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.
Sugaras színátmenet <radialGradient cx=“x%” cy=“y%” r=“r%” fx=“fx%” fy=“fy%” … > 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/
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.
Mintázatok <pattern id=“név” x=“x” y=“y” width=“w” height=“h” patternUnits=“objectBoundingBox | userSpaceOnUse” viewBox=“x0 y0 sx sy”> …mintázat…</pattern> 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
Feladat <polyline points=“10,10 15,10 15,5 5,5 5,15 15,15” style=“fill: none; stroke: red”/> <rect width=“20” height=“20” style=“fill: none; stroke: green”/> • 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.
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.
Mintázatok <pattern id=“név” patternUnits=“objectBoundingBox | userSpaceOnUse” patternContentUnits=“objectBoundingBox | userSpaceOnUse”> …mintázat…</pattern> 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
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.
Kitöltés transzformációk <pattern patternTransform=“…”> <linearGradientgradientTransform=“…”> 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.