Web-grafika II (SVG) 1. gyakorlat

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

2. SVG alapok Scalable Vector Graphics (méretezhető vektor grafika, 2D) XML (Extensible Markup Language) alapú Megengedett elemek, attríbútumok, szintaxis leírása egy DTD file-ban Elem: <circle> …elem tartalma…</circle> Attrimútum: <circle …attribútumok…/> Megjegyzés: <!-- …több soros megjegyzés… -->

3. SVG file felépítése 1. sor: <?xml version=“1.0”?> verzió megadása(kötelező) <!DOCTYPE svg PUBLIC “-//W3//DTD SVG 1.0//EN” “http://www.w3.org/TR/2001/REC-SVG-20010904/ DTD/svg10.dtd”> DTD file helye <title> …Cím… </title> <desc> …Rövid leírás… </desc> <svg width=“200” height=“200”> …a lényeg, maga a kép leírása… </svg>

4. Vonal <linex1=“x1” y1=“y1” x2=“x2” y2=“y2”style=“kinézet megadása”/> A feketével írt karakterek az attribútumok nevei, míg a zöldesek az attribútumok értékei. Ez utóbbiak helyére mindig az aktuális érték kerül. Ahol: line: az elem neve (vonal) x1,y1: a vonal kezdőpontjának x és y koordinátája x2,y2: a vonal végpontjának x és y koordinátája style: a vonal megjelenítésére vonatkozó utasításokat itt tudjuk megadni

5. Stílusok A style attribútumban megadható tulajdonságok, amiket ‘; ’ választ el egymástól: stroke: vonal színe – megadható: szín neve: aqua, black, yellow, … 6jegyű hexadecimális: #rrggbb(00-ff közötti értékek) 3jegyű hexadecimális: #rgb (0-f közötti értékek) 3db decimális: rgb(r g b) (0-255 v. 0-100%) stroke-width: vonal vastagsága stroke-opacity: vonal áttetszősége (0-1 tizedestört) stroke-dasharray: szaggatottság (számok listája) stroke-linecap: vonalvégződés (butt,round,square) <linex1=“10” y1=“10” x2=“100” y2=“100”style=“stroke: red; stroke-width: 6; stroke-dasharray: 2 7”/>

6. Feladatok • Rajzolj 5 vízszintes vonalat egymás alá a következő tulajdonságokkal:1. 2 vastag, piros(red), 0 áttetszőségű, (5,5) szaggatottságú2. 4 vastag, világoskék(#9999ff), 0.25 áttetszőségű, (10,5) szaggatottságú3. 6 vastag, világoszöld(#9f9), 0.5 áttetszőségű, (5,5,10,5) szaggatottságú, levágott vonalvég (butt)4. 8 vastag, narancs(rgb(255,128,64)), 0.75 áttetszőségű, (5,2,10,5) szaggatottságú, kerekített vonalvég (round)5. 10 vastag, lila(rgb(60%,20%,60%)), 1 áttetszőségű, (5,2,10) szaggatottságú, kiegészített vonalvég (square)

7. Téglalap <rectx=“x” y=“y” width=“w” height=“h” rx=“rx” ry=“ry” style=“s”/> Ahol: rect: az elem neve (téglalap) x,y: a téglalap bal felső pontjának x,y koordinátája width: a téglalap szélességeheight: a téglalap magasságarx,ry: a sarkok lekerekítéséhez használt sugarak style: a téglalap stílus-jellemzői fill: kitöltési szín (none) fill-opacity: kitöltés átlátszósága a vonalaknál tanultak itt is használhatóak a téglalap körvonalának beállítására

8. Feladatok Rajzolj egy 100*150-as tégalapot a (20,20) pontba és egy 30*50-eset a (150,100) pontba. Ez utóbbi sarka legyen lekerekítve 15, ill 5 sugárral. További beállítások:- az első legyen piros, a második kék és az átlátszóságuk0.3 és 0.8.- az első kerete legyen 8 egység vastag és zöld színű

9. Kör és ellipszis <circlecx=“x” cy=“y” r=“r” style=“s”/> <ellipse cx=“x” cy=“y” rx=“rx” ry=“ry” style=“s”/> Ahol: circle, ellipse: az elem neve (kör, ellipszis) cx,cy: az alakzatok középpontjainak x,y koordinátája r: a kör sugara rx, ry: az ellipszis x ill y irányú sugara style: a téglalapnál használt stílus-jellemzők itt is használhatóak

10. Sokszög és töröttvonal <polygon points=“pontok” style=“s”/> <polyline points=“pontok” style=“s”/> Ahol: polygon, polyline: az elem neve(sokszög, töröttvonal) points: acsúcsok x,y koordinátájának listája style: fill-rule: egymást metsző vonalakat tartalmazó sokszög kitöltési szabálya (nonezero, evenodd)stroke-linejoin : a vonalak kapcsolódása (bevel, round, miter) a téglalapnál használt stílus-jellemzők itt is használhatóak <polygon points=“48,16 16,96 96,48 0,48 80,96” style=“fill: aqua; stroke: blue; fill-rule: evenodd; stroke-linejoin: round”/>

11. Feladatok Rajzolj egy házikót kerek ablakokkal, ajtóval, kéménnyel.