1 / 14

SVG Styling Practice with Internal and External Styles

Learn how to apply internal and external CSS styles within SVG files, create classes, masks, and clipping paths for unique visual effects. Explore SVG styling techniques and enhance your graphics skills.

gaerwn
Download Presentation

SVG Styling Practice with Internal and External Styles

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)8. gyakorlat Kereszty Gábor

  2. Belső stíluslapok Style elhelyezése az svg törzsön belül: <style type=“text/css”> <![CDATA[ elem { tulajdonság1: érték1; tulajdonság2: érték2; …} … további elemek … ]]> </style> <rect x=“x” y=“y” width=“w” height=“h”/> 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;…} <elemattribútumok class=“osztálynév1[osztálynév2]”/> 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 .css file-ban leírjuk az egyes stílusjellemzőket: * { fill: red; stroke: blue;}/* Alapértelmezett érték minden elemre */ rect {fill: blue;} .kover {stroke-width: 5;} .atlatszo {fill-opacity: 0.5;} A .svg file 2. sorában betöltjük ezt a külső stíluslapot: <?xml-stylesheet href=“kulso.css” type=“text/css”?>

  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 következő megadási módok ekvivalensek: <rect x=“x” y=“y” width=“w” height=“h” style=“fill: blue; stroke: red;”/> <rect x=“x” y=“y” width=“w” height=“h” fill=“blue” stroke=“red”/> • A stílusdefiníciók prioritása csökkenő sorrendben: • Külső stíluslap • Belső stíluslap • Közvetlen stílusdefiníció

  9. Vágás <defs> <clipPath id=“cP”> <text x=“x” y=“y” style=“fill: none; font-size: 48pt”>FELIRAT</text> </clipPath> </defs> <alakzat… style=“clip-path: url(#cP); …további stílusok…”/> <g style=“clip-path: url(#cP)”> … alakzatok … </g> 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. <defs> <clipPath id=“cP” clipPathUnits=“objectBoundingBox”> <circle cx=“0.5” cy=“0.5” r=“0.6” /> </clipPath> </defs> <alakzat… style=“clip-path: url(#cP); …további stílusok…”/> <g style=“clip-path: url(#cP)”> … alakzatok … </g> 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 <defs> <mask id=“maszk” x=“x” y=“y” width=“w” height=“h” maskContentUnits=“objectBoundingBox | userSpaceOnUse”> <rect x=“x” y=“y” width=“rw” height=“rh” style=“fill: white; fill-opacity: 0.5”/> </mask> </defs> <alakzat… style=“mask: url(#maszk); …további stílusok…”/> <g style=“mask: url(#maszk)”> … alakzatok … </g> 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.

More Related