SVG-rektangel og andre SVG-former

Flere former kan oprettes ved hjælp af SVG-tegning. En SVG-tegning kan bruge og kombinere syv former: Sti, Rektangel, Cirkel, Ellipse, Linie, Polyline og Polygon.

Sti

Det pathelement er den mest almindeligt set, og er normalt genereret af programmer designet til eksport SVG-koden.

Eksemplet pathovenfor genererer en "plus" symbole (+), når den bruges i en SVG-tegning. SVG- pathelementer bygges ikke manuelt, men genereres gennem designprogrammer, der kan manipulere vektorgrafik, såsom Illustrator eller Inkscape.

Rektangel

Rektangelelementet recttegner et rektangel på skærmen, og det accepterer seks attributter.

xog ytildel positionen i øverste venstre hjørne af rektanglet, widthog heighttildel størrelsen på rektanglet. rxog rytildel radiusen af ​​rektangelhjørnerne, svarende til CSS border-radius-egenskaben.

Cirkel

Cirkelelementet circleaccepterer tre attributter.

cxog cytildel positionen for centrum af cirklen og tildel cirkelens rradius (størrelse).

Ellipse

Ellipseelementet,, ellipsesvarer til circleelementet, undtagen at radius er opdelt i to attributter.

Igen, cxog cytildel positionen for centrum af ellipsen, rxog rytildel henholdsvis den vandrette og lodrette radius af ellipsen. En større rxgiver en "fed" ellipse, og en større rygiver en tyndere ellipse. Hvis rxog ryer lige, vil det danne en cirkel.

Linie

Det lineelement er enkel, og accepterer fire attributter.

Den x1og y1attributter tildele det første punkt i ledningen, og den x2og y2attributter tildele det andet punkt af linjen.

Polyline

A polylineer en række tilsluttede lige linjer, tildelt i en enkelt attribut.

De pointsattribut tildeler en liste over punkter, hvert punkt adskilt af et komma.

Polygon

Det polygonelement er også en serie af forbundne lige linjer, men i dette tilfælde, vil den sidste linje automatisk genoprette forbindelsen til det oprindelige punkt.

Dette eksempel tegner den samme form som polylineovenstående, men det trækker en ekstra linje for at "lukke" rækken af ​​linjer.

Mere information

MDN-dokumentation: MDN