Csoportosítás, elnevezés

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ó:


Alakzatok elnevezése és többszöri felhasználása

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.


Alakzatok csoportba foglalása

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.


A defs és symbol elemek

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= "" >
<!-- Ide kerül a csoportosítandó elemek leírása. -->
</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.