Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


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

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: …elem tartalma… Attrimútum: Megjegyzés:

3 SVG file felépítése 1. sor: verzió megadása (kötelező) DTD file helyehttp://www.w3.org/TR/2001/REC-SVG / DTD/svg10.dtd …Cím… …Rövid leírás… …a lényeg, maga a kép leírása…

4 Vonal 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 %) 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)

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) vastag, lila(rgb(60%,20%,60%)), 1 áttetszőségű, (5,2,10) szaggatottságú, kiegészített vonalvég (square)

7 Téglalap 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ége height: a téglalap magassága rx,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águk 0.3 és az első kerete legyen 8 egység vastag és zöld színű

9 Kör és ellipszis 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 Ahol : polygon, polyline: az elem neve (sokszög, töröttvonal) points: a csú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

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


Letölteni ppt "Web-grafika II (SVG) 1. gyakorlat Kereszty Gábor."
Google Hirdetések