SVG ristkülik ja muud SVG kujundid

SVG joonistamise abil saab luua mitu kuju. SVG joonisel saab kasutada ja kombineerida seitset kuju: tee, ristkülik, ring, ellips, joon, joonjoon ja hulknurk.

Tee

pathElement on kõige sagedamini täheldatud, ja on tavaliselt loodud programmide eesmärk on eksport SVG-koodi.

Ülaltoodud näide pathgenereerib SVG joonise sees sümboli „pluss” (+). SVG- pathelemente ei ehitata käsitsi, vaid genereeritakse kujundusprogrammide kaudu, mis saavad manipuleerida vektorgraafikaga, näiteks Illustrator või Inkscape.

Ristkülik

Ristküliku element rectjoonistab ekraanile ristküliku ja see aktsepteerib kuut atribuuti.

xja ymäärake ristküliku vasaku ülanurga asukoht widthja heightmäärake ristküliku suurus. rxja rymäärake ristküliku nurkade raadius, mis on sarnane CSS-raadiuse raadiuse omadusega.

Ring

Ringelement circleaktsepteerib kolme atribuuti.

cxja cymäärake ringi keskosa asukoht ning määrake ringi rraadius (suurus).

Ellipse

Ellipsielement, ellipsesarnaneb circleelemendiga, välja arvatud see, et raadius on jagatud kaheks atribuudiks.

Jällegi cxja cymäärata asendit ellipsi kese ja nüüd rxja ryanda horisontaalse ja vertikaalse raadiuse ellips võrra. Suurem rxannab „rasva“ ellipsi ja suurem ryannab kõhnama ellipsi. Kui rxja ryon võrdsed, moodustab see ringi.

Rida

lineElement on lihtne ja võtab neli atribuute.

x1Ja y1atribuudid omistama esimese punkti joone ja x2ja y2atribuudid määrata teise punkti joone.

Polüliin

A polylineon ühendatud atribuutidena määratud sirgjoonte rida.

pointsAtribuuti tsessionääride nimekirja punktide igal punktil eraldatud eralda.

Hulknurk

polygonElement on ka rida ühendatud sirged jooned, kuid sel juhul on viimane rida automaatselt uuesti esialgse punkti.

See näide joonistab sama kuju nagu polylineülaltoodud, kuid joonise rea „sulgemiseks“ tõmbab lisarea.

Rohkem informatsiooni

MDN dokumentatsioon: MDN