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

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

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

2 Belső stíluslapok Style elhelyezése az svg törzsön belül: <![CDATA[ elem { tulajdonság1: érték1; tulajdonság2: érték2; … } … további elemek … ]]> Ekkor a téglalap stílusát elég fent megadni, viszont ebben a dokumentumban minden téglalapnak ugyanolyanok lesznek a stílusjellemzői.

3 Feladat Készíts két belső stílust egy svg file-ba. Az egyik a körök, a másik a téglalapok kinézetét befolyásolja. A körök legyenek kitöltetlenek és 2 egység széles, kék színű körvonallal rendelkezzenek. A téglalapok belseje legyen átlátszó piros színű, körvonaluk 2 egység és zöld. Készíts 10 kört és 10 téglalapot a stílusok megtekintéséhez.

4 Stílus-osztályok elem.osztálynév1 { tulajdonság1: érték1; …}.osztálynév2 { tulajdonság2: érték2; …} Ekkor nem minden alakzat stílusát adjuk meg előre. Minden alakzatban be kell állítani, hogy felhasználja e az osztályt, vagy sem. Egyszerre akár több osztályt is felhasználhatunk!

5 Feladatok Hozz létre az előző file-ban egy „teli” osztályt, mely a körökön belül érvényes, és kék kitöltőszínt állít be. Az előbb létrehozott körök közül néhánynál állítsd be, hogy a stílusuk „teli” legyen. Hozd létre a „sárga” osztályt, mely félig átlátszó sárga kitöltőszínt definiál. Rendeld ezt az osztályt néhány körhöz és néhány téglalaphoz.

6 Külső stíluslapok - CSS A.svg file 2. sorában betöltjük ezt a külső stíluslapot: * { fill: red; stroke: blue;}/* Alapértelmezett érték minden elemre */ rect {fill: blue;}.kover {stroke-width: 5;}.atlatszo {fill-opacity: 0.5;} A.css file-ban leírjuk az egyes stílusjellemzőket:

7 Feladat Az eddig létrehozott belső stíluslapot mentsük ki egy stilus.css nevű file-ba, majd ezt használjuk fel a kívánt stílus megjelenítéséhez.

8 Stílusok - egyéb A stílusdefiníciók prioritása csökkenő sorrendben: 1.Külső stíluslap 2.Belső stíluslap 3.Közvetlen stílusdefiníció A következő megadási módok ekvivalensek:

9 Vágás FELIRAT … alakzatok … Ekkor az alakzatokból csak a fent definiált vágási területben lévő részek fognak látszódni.

10 Feladat Az eddig használt file-ba helyezz el egy vágást, ami egy négyzetből és egy körből áll. Alkalmazd ezt a vágást az összes alakzaton. Készíts egy másikat, ami egy text elemet tartalmaz. Próbáld ki a hatását.

11 Vágás folyt. … alakzatok … Most annyiban térünk el az előzőtől, hogy a vágási terület nem abszolút, hanem az alakzat befoglaló téglalapjának arányában számítódik ki.

12 Feladat Készíts egy olyan vágógörbét, ami az egész munkalapnak csak egy kör alakú részét mutatja. A kör tetszőleges helyen lehet, a sugara a befoglaló alakzat 30%-a legyen.

13 Maszkolás … alakzatok … Ekkor az alakzatokból csak a fent definiált rész fog látszani, az is csak a megfelelő átlátszósággal.

14 Feladat Készíts egy körkörös színátmenetet, ahol a szinek fehérek, és csak az átlátszóság változik. Használd fel ezt egy maszk készítéséhez. (objectBoundingBox) Készíts két téglalapot egymásra helyezve. A hátsó legyen piros, az első kék. Ez utóbbinál használd a maszkot is.