SVG-suorakulmio ja muut SVG-muodot

SVG-piirustuksella voidaan luoda useita muotoja. SVG-piirustuksessa voidaan käyttää ja yhdistää seitsemää muotoa: polku, suorakulmio, ympyrä, ellipsi, viiva, viiva ja monikulmio.

Polku

pathElementti on yleisimmin nähty, ja se on yleensä ohjelmapaketin suunniteltu viemään SVG koodia.

pathYllä oleva esimerkki tuottaa "plus" -symbolin (+), kun sitä käytetään SVG-piirustuksen sisällä. SVG- pathelementtejä ei rakenneta manuaalisesti, vaan ne luodaan suunnitteluohjelmien avulla, jotka voivat manipuloida vektorigrafiikkaa, kuten Illustrator tai Inkscape.

Suorakulmio

Suorakulmioelementti rectpiirtää suorakulmion ruudulle, ja se hyväksyy kuusi määritettä.

xja ymääritä suorakulmion vasemman yläkulman sijainti widthja heightmääritä suorakulmion koko. rxja rymääritä suorakulmion kulmien säde, samanlainen kuin CSS-reunan säde -ominaisuus.

Ympyrä

Ympyräelementti circlehyväksyy kolme määritettä.

cxja cymääritä ympyrän keskipisteen sijainti ja ympyrän rsäde (koko).

Ellipsi

Ellipsielementti,, ellipseon samanlainen kuin circleelementti, paitsi että säde on jaettu kahteen attribuuttiin.

Jälleen, cxja cymääritä ellipsin keskipisteen sijainti, ja nyt rxja rymääritä ellipsin vaakasuora ja pystysäde vastaavasti. Suurempi rxantaa "rasvaisen" ellipsin ja suurempi ryantaa laihemman ellipsin. Jos rxja ryovat yhtä suuria, se muodostaa ympyrän.

Linja

lineElementti on yksinkertainen, ja hyväksyy neljä ominaisuuksia.

x1Ja y1attribuutit määrittää ensimmäisen linjan pistettä, ja x2ja y2ominaisuudet antaa toisen linjan pistettä.

Polyline

A polylineon sarja yhdistettyjä suoria viivoja, jotka on osoitettu yhdeksi määritteeksi.

pointsAttribuutti osoittaa luettelon pistettä, jokainen piste on erotettu pilkulla.

Monikulmio

polygonElementti on myös sarja kytketty suorat linjat, mutta tässä tapauksessa, viimeinen rivi automaattisesti uudelleen alkuperäiseen kohtaan.

Tämä esimerkki piirtää saman muodon kuin polylineyllä, mutta se piirtää ylimääräisen viivan "sulkemaan" rivisarjan.

Lisää tietoa

MDN-dokumentaatio: MDN