Példa az svg
A D3 a leghasznosabb, ha SVG alapú vizuális képeket hoz létre és manipulál. Rajz div „s és más HTML-elemeket is lehetséges, de egy kicsit kényelmetlen, és általában megjelennek a kijelzőn eltérések a különböző böngészőkben. Az SVG használata megbízhatóbb, vizuálisan konzisztens és gyorsabb.
SVG elem
Scalable Vector Graphics (méretezhető vektoros grafika) - a szövegen alapuló képek formátuma. Minden egyes SVG-képet a HTML-hez hasonló kódjelzéssel definiálunk. Az SVG-kódot közvetlenül a HTML dokumentumba lehet beilleszteni. Minden webböngésző támogatja az SVG-t, kivéve az Internet Explorer 8-as vagy annál idősebb változatait. Az SVG alapja az XML, így észreveheti, hogy az elemek, amelyeknek nincs záró címkéjük, önzárónak kell lenniük. Például:
Itt van a fenti kód segítségével létrehozott SVG elem:
Vegyük észre, hogy van egy SVG elem, amely vízszintesen 500 képpontot és 50 képpontot függőlegesen tart.
Vegye figyelembe, hogy a böngészők alapértelmezés szerint a képpontok az intézkedés egysége. 500 és 50, nem 500px és 50px méretűek. Megadhatjuk a px-t kifejezetten, vagy bármely más mértékegységet, például: em. pt. a. cm. és mm.
Egyszerű formák
Vannak olyan alakzatok, amelyeket az SVG elem belsejébe helyezhet. Ez a készlet tartalmazza: rect. kört. ellipszis. vonalon. szöveg és útvonal.
Ha ismeri a számítógépes grafika programozás, emlékszel, hogy a koordináta-rendszer alapja rendszerint a pixelek kezdődik a bal felső sarokban, és a pont koordinátái (0,0). Az x növekedése balról jobbra, y növekedés a felülről lefelé.
rect von ki egy négyzetet. A négyzetet négy érték adja: x. y - jelzi a bal felső sarok pontját; szélessége. magasság - jelöli a négyzet szélességét és magasságát. Ez a tér elfoglalja SVG teljes területét:
kör húz egy kört. A kört három érték adja: cx. cy jelöli a körülírt kör középpontjában található pontot, r határozza meg a kör sugarait. Ez a kör az SVG középpontjában található, mivel a cx ("center-x") attribútum 250. Példa:
az ellipszis a körhöz hasonlóan van beállítva. de feltételezzük, hogy a sugarat két tengely adja: x és y. X használata helyett x. ahelyett, hogy y - ry.
vonal vonalat von be. Használja az x1-et és az y1-et a vonal eredetének meghatározásához, és x2 és y2 a vég koordinátáinak megadásához. A vonás attribútumnak meg kell adnia a vonal színét, különben láthatatlan lesz.
szöveg húzza a szöveget. Használja az x-et. jelzi a bal oldalt, és y. Az úgynevezett alapvonal függőleges helyzetének jelzése.
a szöveg örökli a szülőelem betűtípusának CSS-stílusait, hacsak nem adja meg a szöveg stílusát. Vegye figyelembe, hogy a fenti szöveg formázása megegyezik a jelen bekezdésben leírt szöveggel. Az ilyen formázási stílusokat felülírhatjuk:
Felhívjuk a figyelmet arra is, hogy ha bármilyen vizuális elem az SVG elem határa ellenében fennáll, akkor körülmetélik. Legyen óvatos, amikor szöveget használ. így a szöveg nem kerül körülmetélkedésre. Láthatja, hogy mi történik a szöveggel, ha az alapvonalat (vagyis az y értéket) 50-re állítja, ugyanaz, mint az SVG magasság:
path felhívja valami bonyolultabb, mint a fent leírt számok (pl sziluettje országok geológiai térkép), valamint külön ismertetjük. És most egyszerű számokkal dolgozunk.
SVG elemek kialakítása
Alapértelmezés szerint bármelyik SVG elemnek fekete betöltése van, és nincs keret. Ha valamit szeretne ezen túlmenően, akkor stílusokat kell alkalmazni az elemre. A közös SVG tulajdonságok az alábbiak:
- kitöltés. Színérték. A CSS-hez hasonlóan a szín többféleképpen is meghatározható:
- név: narancssárga;
- érték hexadecimális jelölésben: # 3388aa. # 38a;
- érték RGB formátumban: rgb (10, 150, 20);
- érték RGBA formátumban: rgba (10, 150, 20, 0.5).
- stroke - keret. Színérték.
- löketszélesség - a szélesség szélessége (általában képpontokban).
- homályosság - átláthatóság. A számérték 0,0 (teljesen átlátszó) és 1,0 (teljesen látható) között.
A szöveg használatával a következő tulajdonságokat is használhatja:
Kétféleképpen alkalmazhat stílusokat az SVG-elemekhez: vagy közvetlenül hozzárendel egy stílushoz tartozó attribútumokat vagy CSS-szabályokat.
Az alábbiakban néhány CSS tulajdonságot közvetlenül a kör eleme határoz meg:
Más módon megtehetjük ezt: ne rendeljünk stílus attribútumokat, hanem adjon meg egy stílusosztályt (valamint a szokásos HTML elemet):
majd töltsd fel. stroke és stroke szélesség paraméterek a szükséges osztály CSS stílusaiban:
A második megközelítésnek számos nyilvánvaló előnye van:
- Lehetőséged van arra, hogy egyszerre írd le az osztályt és alkalmazzuk sok elemre.
- A CSS-kódot könnyebb észlelni, mint az elemeken belüli attribútumokat.
- Emiatt a második megközelítés könnyebben karbantartható, és gyorsabb is.
A CSS használatával azonban a stílusok SVG-re való alkalmazásához mindkettő zavaros lehet. töltse ki. szélütés. A löketszélesség nem CSS-tulajdonság (a legközelebbi CSS-ekvivalens háttérszín és szegély). Annak érdekében, hogy emlékezzenek arra, hogy az SVG-elemekhez milyen stílusszabályok vannak megadva, célszerű az SVG-t a CSS választóba beilleszteni:
Átfedés és a rajz sorrendje
Az SVG-ben nincs ilyen réteg, és nincs mélységi koncepció. Az SVG nem támogatja a z-index CSS tulajdonságát. Így az ábrák kétdimenziós téren belül rendelhetők.
És ha rajzol néhány számot, átfedik:
A kódban megadott elemek sorrendje meghatározza azok mélységét. A lila négyzet szerepel a kódban először, így az első húzza ki. Ezt követõen egy kék négyzet húzódik az ibolya felett, majd a kék és az ibolya felett zöld, és így tovább.
A rajzrendnek ez a szempontja akkor válik fontosabbá, ha több olyan vizuális elem van, amelyet semmilyen módon nem szabad felülírni. Például tengelyek vagy értékcímkék lehetnek a scatter diagramon megjelenő tengelyeken. A tengelyeket és címkéket fel kell venni az SVG-hez a végén úgy, hogy azok az elemek többi része előtt megjelennek és láthatóak legyenek.
átláthatóság
Az átláthatóság hasznos lehet, ha a megjelenítő elemek átfedik egymást, de láthatónak kell lennie az összes, vagy ha azt szeretnénk, hogy válasszon ki néhány elemet, de ugyanakkor, hogy más finomabb.
Kétféleképpen alkalmazható az áttetszőség: az RGB színt egy alfa csatornával, vagy az opacitás tulajdonságot numerikus értékre állítva.
Az rgba () használatával bárhol meg kell adnia egy színt, például a kitöltési és a stroke attribútumokban. RGBA () elvárja, hogy akkor adjon neki a 3 értékek közötti tartományban 0-tól 255 a vörös, zöld és kék, valamint az alfa-csatorna (átláthatóság) tartományban 0,0-1,0.
Vegye figyelembe, hogy az rgba () metódussal. Az áttetszőség önállóan érvényes a kitöltési és a stroke attribútumokra. A következő körök kitöltése 75% -ban átlátszó, keretük 25%:
A teljes elem áttetszőségének alkalmazásához be kell állítania az opacitás attribútumot. Az alábbiakban teljesen látható körök láthatók:
és ezek ugyanazok a különböző átláthatóságú körök:
Használhatja azt az elem opacitás attribútumát is, amelynek színeit az rgba () formátumban adják meg. Amikor ezt megteszi, az átlátszóság megszorozódik. A körök alatt használjuk ugyanazt az RGBA színértéket a kitöltéshez és a lökethez. Az első elem nem rendelkezik opacitás tulajdonsággal. míg a másik kettő:
Ne feledje, hogy a harmadik kör átlátszósága 0,2 vagy 20%. Ennek ellenére a lila része 75% -os átlátszósággal rendelkezik. Így a lila rész végül 0,2 * 0,75 = 0,15 vagy 15% átlátható.