SVG-rektangel og andre SVG-former

Flere former kan opprettes ved hjelp av SVG-tegning. En SVG-tegning kan bruke og kombinere syv former: Sti, Rektangel, Sirkel, Ellipse, Linje, Polyline og Polygon.

Sti

The pathelement er mest sett, og er vanligvis generert av programmer som er laget for å eksportere SVG-kode.

Eksemplet pathovenfor vil generere en "pluss" symbole (+) når den brukes i en SVG-tegning. SVG- pathelementer er ikke bygget manuelt, men generert gjennom designprogrammer som kan manipulere vektorgrafikk, for eksempel Illustrator eller Inkscape.

Rektangel

Rektangelelementet recttegner et rektangel på skjermen, og det aksepterer seks attributter.

xog ytilordne posisjonen til det øverste venstre hjørnet av rektangelet, widthog heighttilordne størrelsen på rektangelet. rxog rytilordne radiusen til rektangelhjørnene, i likhet med CSS border-radius-egenskapen.

Sirkel

Sirkelelementet circlegodtar tre attributter.

cxog cytilordne posisjonen til sentrum av sirkelen, og rtilordner sirkelen (størrelse).

Ellipse

Ellipselementet,, ellipseligner på circleelementet, bortsett fra at radiusen er delt inn i to attributter.

Igjen, cxog cytilordne posisjonen til midten av ellipsen, og nå rxog rytilordne den horisontale og vertikale radien til henholdsvis ellipsen. En større rxvil gi en "feit" ellips, og en større ryvil gi en tynnere ellips. Hvis rxog ryer like, vil det danne en sirkel.

Linje

Den lineelement er enkel, og aksepterer fire attributter.

Den x1og y1attributter tilordne den første punkt av linjen, og den x2og y2attributter tildele det andre punktet av linjen.

Polyline

A polylineer en serie med tilkoblede rette linjer, tildelt i et enkelt attributt.

Den pointsattributt tildeler en liste over punkter, hvert punkt adskilt med et komma.

Polygon

Den polygonElementet er også en serie sammenkoblede rette linjer, men i dette tilfellet vil den siste linjen automatisk koblet til startpunktet.

Dette eksemplet vil tegne den samme formen som polylineovenfor, men det vil tegne en ekstra linje for å "lukke" linjeserien.

Mer informasjon

MDN-dokumentasjon: MDN