Egy dokumentum elkészítésekor számos esetben találkozhatunk azzal a jelenséggel, hogy több alakzat rendelkezik ugyanolyan tulajdonságokkal, jellemzőkel, vagy egy elkészített objektum többször szerepel a rajzon. Ilyen esetekben több eszköz is rendelkezésünkre áll a leírás rövidítésére és a munkánk megkönnyítésére. Ebben a fejezetben az alábbi lehetőségekről lesz szó:
Az SVG lehetőséget biztosít arra, hogy bármelyik elemet elnevezzük, majd később a nevével hivatkozzunk rá. Ezt a funkciót többféle ok miatt használhatjuk. Az egyik indok az lehet, hogy a már elkészített elemet újra fel szeretnénk használni. Ez önmagában "csak" a kód rövidítésére szolgál, a dokumentum elkészíthető lenne ennek a funkciónak a hiányában is. A másik ok azonban már kiküszöbölhetetlen: egyes esetekben csak akkor tudunk hivatkozni egy objektumra, ha korábban már elneveztük. Erre a színátmenetek és mintázatok készítésekor lesz szükség.
Az elemek elnevezése nagyon könnyű. Egyszerűen felveszünk az elnevezni kívánt alakzat attribútumai közé egy id nevűt. Ennek értéke lesz az alakzat neve:
<elem id="elnevezés" ... />
Elnevezett elemre a <use> segítségével hivatkozhatunk:
<use | x= | "" | |
y= | "" | ||
width= | "" | ||
height= | "" | ||
style= | "" | ||
xlink:href= | "#elnevezés" | /> |
Az egyes attribútumok az alábbi tulajdonságokat változtatják:
x | az új alakzat eltolásának mértéke az eredetihez képest x irányban |
y | az új alakzat eltolásának mértéke az eredetihez képest y irányban |
width | a megjelenítendő rész szélessége |
height | a megjelenítendő rész magassága |
style | az alakzat stílusjellemzőinek megadása |
xlink:href | hivatkozás az elnevezett alakzatra |
A hivatkozás megadásakor nincs más dolgunk, mint az alakzat neve elé tenni egy # jelet és így hivatkozni rá. A szélesség és a magasság megadása nem minden esetben lehetséges. Erről a fejezet további részében lesz szó.
Fontos megjegyezni, hogy a <use> alkalmas bármilyen névvel rendelkező - vagyis egyértelműen azonosítható - elem újrafelhasználására.
7/1. feladat:
Készíts egy kerítés-részletet. A lécet csak egyszer készítsd el sokszögként, majd elnevezve és többször felhasználva állítsd össze belőle a kerítést.
Amikor felhasználunk egy alakzatot, akkor lehetőség van a - még nem beállított - kinézetét befolyásoló tulajdonságainak megadására. Ezt a style attribútumban tehetjük meg. Itt tetszőleges tulajdonság beállítható, de azok, amelyek már a <use> elemen belül meg voltak adva, nem kerülnek módosításra.
7/2. feladat:
Készíts egy 100×200-as koordinátarendszert. Rajzolj egy 60 egység oldalú zöld négyzetet a 20×20 pontba. Nevezd el, majd használd fel újra 100 egységgel eltolva az x tengely irányában. Állítsd be az új téglalap stílusát, hogy körvonala 5 egység vastag és sárga legyen.
Az előző módszer olyan esetekben alkalmazható, amikor az ismétlendő alakzat egyetlen elemből áll. Általában nem ezzel a szerencsés esettel találkozunk, hanem azzal, hogy az ismétlődő alakzat több elemből áll. Például amikor egy fát szeretnénk többször felhasználni egy rajzon. Ilyen esetek megoldására szolgál a <g> elem. Ennek segítségével könnyedén csoportba foglalhatjuk az alakzat alkotóelemeit, és egyben nevezhetjük el őket. Később az egészet egy egységként használhatjuk fel a dokumentumban egy új helyen. Az elem neve az angol group (csoport) szóból származik.
A csoportba foglalást úgy kell elkészíteni, hogy megnyitunk egy <g> elemet, majd beleírjuk a csoportosítani kívánt alakzatokat, és ezek után lezárjuk az elemet:
<g>
<!-- Ide kerül a csoportosítandó elemek leírása. -->
</g>
A csoportba foglalt elemeknél szintén igaz, hogy a <use> segítségével felhasználhatóak, és a még nem definiált tulajdonságok beállíthatóak.
Ezen kívül a csoportba foglalásnak egy másik nagy előnye is van: a csoportba tartozó elemekhez egységesen tudunk stílust rendelni, ill. egyszerre alkalmazhatunk az egész csoportra egy transzformációt. Ezt úgy tehetjük meg, hogy a <g> elemben felveszünk számukra egy-egy új attribútumot. A stílusjellemzőknél ez egy style lesz, amit a már megismert módon használhatunk. A transzformációkról később lesz szó. A geometriát leíró attribútumok megadására ez a módszer nem alkalmas, azaz nem adhatjuk meg, hogy az összes csoporton belüli négyzet szélessége 70 egység legyen.
Az összefogó képessége miatt szokás ezt az elemet konténer-elemnek is nevezni.
7/3. feladat:
Készíts 5 koncentrikus kört egy 200×200-as rajzlap közepére. A körök sugara legyen 15, 30, 45, 60 és 75 egység. A belsejük legyen sárga, átlátszóságuk 0.2, a körvonaluk pedig kék. A közös tulajdonságokat csoportba foglalással add meg.
A <g> segítségével bármilyen elemeket össze lehet fogni, akár egy másik <g> elem is beágyazható.
7/4. feladat:
Készíts egy 400×400-as rajzlapot. Az előző feladatban elkészített kört nevezd el, majd használd fel újra az x tengely mentén eltolva 200 egységgel. Az új köröknél állítsd be, hogy a körvonalaik vastagsága 5 egység legyen. Az így kapott két kört is nevezd el és rajzold ki újra az y tengely mentén eltolva 200 egységgel.
Az eddig megismert módszerek segítségével már a többszöri újrafelhasználással kapcsolatos feladatok nagy része megoldható. Van azonban néhány nehézség, amivel szembe kell néznünk:
Ezekre a problémákra kínál megoldást a <defs> elem. Segítségével létrehozhatunk alakzatokat anélkül, hogy megjelennének. Ezt úgy érhetjük el, hogy a dokumentumunkban újra felhasználásra szánt elemeket egy <defs> és egy </defs> kódelem páros között helyezzük el. Az itt szereplő elemeket ill. csoportokat elnevezzük, majd később a már megismert módon a <use> segítségével megjelenítjük a rajzon.
7/5. feladat:
Készítsd el a 7/3. feladatban megadott köröket a dokumetumban stílusjellemzők nélkül. A köröket a defs elemen belül helyezd el. Ezután használd fel őket úgy, hogy minden csoportnak más kitöltési és vonalstílust adsz meg.
Egy rajz elkészítése során még egy probléma felmerülhet: szükségünk lehet ugyanarra az alakzatra többféle méretben. Ha ilyen helyzet áll elő, akkor kell használni a <symbol> elemet:
<symbol | id= | "" | |
preserveAspectratio= | "" | ||
viewBox= | "" | > |
</symbol | > |
Az így csoportosított alakzatok nem jelennek meg a rajzunkon, csak akkor, ha a <use> elem segítségével felhasználjuk őket. A csoportosítástól eltérően itt lehetőségünk van megadni, hogy mekkora területre kerüljön kirajzolásra az alakzat (bal felső sarkának koordinátái, szélessége és magassága), és hogy ezt a területet milyen módon töltse ki. Ezekről a beállításokról gondoskodik a viewBox és a preserveAspectRatio mező. Használatuk módját a "Koordinátarendszerek" című fejezet ismerteti.
7/6. feladat:
Készítsd el a 7/3. feladatban megadott köröket a dokumetumodban szimbólumként. Ezt a szimbólumot alapelemként használva készíts sormintát: az egyik elem 40 egység, a következő kettő 20-20 egységny átmérőjű legyen. Készíts egy 10 elemből álló láncot ezek ismétlésével. A körök kitöltéséhez tetszőleges stílust alkalmazhatsz.
Ezek az eszközök nagyfokú rugalmasságot biztosítanak egy dokumentum kialakításához. Ezen kívül nem elhanyagolható hasznuk, hogy segítségükkel jelentősen lerövidülhet a grafikát leíró kód mérete.