Stílusjellemzők 2. - Alakzatok kitöltése

Már tudunk alakzatokat rajzolni és azok körvonalának színt, mintát adni. Ebben a fejezetben az alakzatok kitöltésének legegyszerűbb módjával ismerkedhetsz meg: az egy színnel történő színezéssel.

Ahogyan a vonalak stílusának megadásakor is többféle jellemző beállítására van lehetőség, ugyanúgy a kitöltés színét is több tényező befolyásolja. A stílusjellemzők megadásához - mint minden esetben - most is a style attribútumnak kell értéket adni. Ha egyszerre szeretnénk egy alakzat körvonalának stílusát és a belsejének a színét meghatározni, akkor is egyetlen attribútumban kell felsorolni a jellemzőket. A tulajdonságok nevéből egyértelműen kiderül, hogy mire vonatkozik az érték.


Kitöltés színe

Az alakzatok belsejének színét a fill tulajdonsággal kell beállítani. Ugyanúgy, mint a vonalak színének megadásakor, most is ötféle színmegadási módszer közül lehet választani. A színtelen alakzatok eléréséhez most is a none értéket kell beállítani. A színeket ismét a specifikáció megfelelő részéből keresheted ki.

5/1. feladat:

Rajzolj 5 négyzetet, és színezd ki őket 5 különböző színnel, 5 különböző módon. Pl.:


Kitöltés átlátszósága

A kitöltés színe mellett az átlátszóság megadására is lehetőség van. Erre a fill-opacity tulajdonság szolgál. A vonal stroke-opacity tulajdonságához hasonlóan ennek értéke is 0 és 1 közötti lebegőpontos szám lehet. A 0 érték teljesen átlátszó kitöltést jelent, az 1 pedig teljesen átlátszatlant.

5/2. feladat:

Az előző feladatban elkészített négyzetek átlátszóságát allítsd be 0.2, 0.4, 0.6, 0.8 és 1 értékűre.


Több alakzat és körvonalaik viszonya

Az eddigi példákban már szerepelt több alakzat. Ezek azonban sosem takarták el egymást, nem volt közös részük. Ha valódi rajzokat készítünk, akkor szükségessé válik egymást fedő alakzatok létrehozása. Ilyen esetekben fontos tudni, hogy milyen módon viselkednek a különböző alakzatok egymás fedése esetén.
SVG-ben minden egyes alakzatnak van egy saját rétege, koordinátarendszerrel ellátva. Ezeket a rétegeket helyezi egymás fölé a böngésző, amikor egy képet megjelenít. A rétegek sorrendje követi a leírásban szereplő sorrendet, azaz a dokumentumban elsőként szereplő alakzat kerül a legalsó rétegbe, a következő fölé, sorban az utolsóig. Ennek ismeretében könnyen ki lehet találni, hogy a dokumentumban később leírt alakzat eltakarja az alatta lévőket. Ezt természetesen a kitöltés színe is befolyásolja, azaz ha átlátszó, áttetsző kitöltést adunk egy alakzatnak, akkor a kitakart részek is látszódnak, bár nem teljes erősséggel.

5/3. feladat:

Készíts két különböző fát. Az egyik egy téglalapból és egy ellipszisből álló lombos fa legyen, a másik egy téglalap és egy sokszög segítségével készített fenyőfa legyen. Ügyelj arra, hogy a törzs és a lomb viszonya megfelelő legyen.

Az alakzatok körvonala a stílusjellemzők szempontjából ugyanúgy viselkedik, mint az vonal. Középvonala illeszkedik a síkidom körvonalához, megjelenítéskor pedig alulra kerül az alakzat belseje, "fölé" a határoló vonala.

5/4. feladat:

Rajzolj egy 50×50-es téglalapot a (40,40) pontba, a belseje legyen zöld. A körvonalának színe legye piros, vastagsága 10 egység. Állítsd be a vonal átlátszóságát 0.4-re.

Az elkészült ábrán jól látható, hogy a határoló vonal fele az alakzat belsején, másik része pedig rajta kívül helyezkedik el. Az egyes részek színe pedig az egymás felett elhelyezkedő rétegek színeiből áll össze.