Figs in svg
- vonal
Könnyű egyszerű vonalat rajzolni. Két pont koordinátáit jelöljük, és sor kerül közöttük.
Egy vonal rajzolásához használja a vonalcímkét. Az x1 és y1 attribútumok értékei a vonal kezdetének koordinátáit állítják be, az x2 és y2 értékek pedig meghatározzák a vonal végét.
Mindenképpen adja meg a lökethossz-szélességi attribútumot. különben a vonal láthatatlan lesz.
- Sok sor
Egy többvonalas címkét használ több vonal rajzolásához. amely az egyenes vonalhoz kapcsolódó szegmensek sorát határozza meg, amely ennek eredményeként rendszerint egy lezárt alakot ad (amelynek kezdetének és végpontjainak nincsenek összefüggései).
A pontok értékei az x és y tengely mentén az ábra elejétől a végéig határozzák meg az értékeket, és az egész értéklista párra (x, y) vannak osztva. Egy páratlan pontszám hiba.
Egy vonal meghatározása a vonallánc címke használatával. megadunk egy sor pontot. Az első pontot 0 pixel jobbra és 40 képpont lefelé ellensúlyozza. Ezután a vonal 30 ponttal jobbra és 0 ponttal lefelé halad a kiindulási ponttól; így létrejön az első szegmens. A következő pontot 60 képpont jobbra és 40 képpont lefelé tolja, az utolsó pont 285 képpont jobbra és 40 képpont lefelé. A stílus attribútum határozza meg a vonal vastagságát és színét.
Az ábra nem zárul le automatikusan, ha az első és az utolsó pont nem egyezik. A kitöltési attribútumot alkalmazhatjuk az alak kitöltésére, de az eredmény nem lesz pontosan ugyanaz, mint a zárt alakzatok árnyékolása esetén.
- kerek
elem
Beállíthatja a löket szélességét és színét is.
A kód egy részét átviheti az SVG-ről a CSS-re.
Több kör kombinációja lehetővé teszi számunkra, hogy Amerika Kapitány pajzsát hozzuk létre.
Amerika Kapitány Pajzs
- ellipszis
Az ellipszis kör alakú, csak két sugárértéket és egy központi pontot jeleznek. A cx és cy attribútumok a középpontot az SVG koordináták kezdetétől a meghatározott távolságban helyezik el, az rx és ry értékei határozzák meg az ábra oldalainak sugarait.
Adjon hozzá egy hivatkozást az ellipszisre és definiálja a CSS tulajdonságot
- téglalapok
A téglalap több tulajdonsággal rendelkezik, mint egy kör. De általában egyértelmű - az első pont koordinátái a bal felső sarokban, szélességben és magasságban.
A szélesség és a magasság attribútumok megadják a téglalap méretét, ha nincsenek megadva egységek, akkor alapértelmezés szerint ezek képpontok lesznek.
A kitöltési attribútum az alak belső színe. Ha az attribútum nincs megadva, az alapértelmezett szín fekete.
Az x és y koordináták az alakot az adott tengely mentén helyezik el a megfelelő tengely mentén.
A rx és ry attribútumokon keresztül keresztezheti a sarkokat.
Különböző értékeket adhat meg rx és ry esetén.
- sokszög
Rajzolj egy háromszöget. A pont attribútumban meg kell adni a pontok koordinátáit - a háromszög csúcsai. Az egyes pontok koordinátaértékének párokat vesszővel elválasztjuk. A pontok sorrendje nem fontos. Továbbá nem kell az első és az utolsó pontot összekapcsolni, ez automatikusan megtörténik.
Példa egy egyenlő oldalú háromszögre.
Ha több mint három pont van, egyszerűen hibát követhetsz el, és teljesen más alakot hozhatsz létre, ami várható volt.
Vannak olyan ismert alakok, amelyek kódját egyszerűen át lehet másolni.
csoport
Egy speciális SVG-tag g lehetővé teszi a kapcsolódó elemek csoportosítását és kezelését. Készítsen két alakzatot azonos tulajdonságokkal.
Használhatja az azonosítót, és különválasztja a tulajdonságokat.
További olvasmány
Vissza az SVG-hez