1 / 15

Web-grafika II (SVG) 3 . gyakorlat

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 ”>

gareth
Download Presentation

Web-grafika II (SVG) 3 . gyakorlat

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  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 <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/

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

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

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

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

More Related