SVG stačiakampis ir kitos SVG formos

Naudojant SVG piešinį galima sukurti keletą formų. SVG piešinyje galima naudoti ir sujungti septynias figūras: Kelias, Stačiakampis, Apskritimas, Elipsė, Linija, Traukimo linija ir Daugiakampis.

Kelias

pathElementas yra dažniausiai vertinama ir paprastai generuoja programas, skirtas eksporto SVG kodą.

Aukščiau pateiktame pavyzdyje pathbus sukurta „pliuso“ simbolika (+), kai bus naudojama SVG piešinyje. SVG pathelementai nėra kuriami rankiniu būdu, bet generuojami per dizaino programas, kurios gali manipuliuoti vektorine grafika, pavyzdžiui, „Illustrator“ ar „Inkscape“.

Stačiakampis

Stačiakampio elementas rectpiešia stačiakampį ekrane ir priima šešis atributus.

xir ypriskirkite viršutinio kairiojo stačiakampio kampo padėtį widthir heightpriskirkite stačiakampio dydį. rxir rypriskirkite stačiakampio kampų spindulį, panašų į CSS krašto spindulio savybę.

Apskritimas

Apskritimo elementas circlepriima tris atributus.

cxir cypriskirti apskritimo centro padėtį bei priskirti apskritimo rspindulį (dydį).

Elipsė

Elipsės elementas,, ellipseyra panašus į circleelementą, išskyrus tai, kad spindulys yra padalintas į du požymius.

Vėlgi, cxir cypriskirti nuo elipsės centro poziciją, o dabar rxir rypriskirti horizontalią ir vertikalią spindulys elipse, atitinkamai. Didesnis rxsuteiks „riebią“ elipsę, o didesnis ry- liesesnę elipsę. Jei rxir ryyra lygūs, tai suformuos apskritimą.

Linija

lineElementas yra paprastas, ir prisiima keturis požymius.

x1Ir y1atributai priskirti pirmąjį tašką linijos, o x2ir y2atributai priskirti antrąjį tašką linija.

Polyline

A polylineyra sujungtų tiesių linija, priskirta vienam atributui.

Į pointsĮgūdis priskiria kiekis sąrašas, kurios kiekvienas taškas atskirtos kableliais.

Poligonas

polygonElementas taip pat yra sujungtų tiesių linijų, tačiau šiuo atveju, paskutinė eilutė bus automatiškai prisijungti prie pradinio taško.

Šis pavyzdys nubrėžs tą pačią formą kaip ir polylineaukščiau, tačiau jis nubrėžs papildomą liniją, kad "uždarytų" linijų seriją.

Daugiau informacijos

MDN dokumentacija: MDN