SVG-muototunnisteista polku on tehokkain, ja polun hallinta riittää yleisten piirrosongelmien ratkaisemiseen.
Katsotaanpa ensin polkutunnisteen peruskäyttöä:
<polku d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Polkutunniste määrittelee polun ominaisuuden d:n kautta, joka määrittää tiedon, joka koostuu merkkijonosta, ja polku voidaan myös määritellä täyttö- ja viiva-attribuuteilla täytön ja reunan määrittämiseksi.
d-attribuutin tiedot eivät itse asiassa ole monimutkaisia, se koostuu kirjaimista ja numeroista, numerot edustavat koordinaattipisteitä ja kirjaimet kuvaavat näiden koordinaattipisteiden yhdistämistä. Esimerkiksi yllä olevassa esimerkissä M edustaa lähtöpistettä ja L suoraa yhteyttä, joten d:n informaatio voidaan tulkita näin:
M100,100 -> alkaa koordinaattipisteestä (100,100)
L200 200 -> Piirrä suora viiva (100 100) välillä (200 200).
L200 400 -> Piirrä suora viiva (200 200) ja (200 400) välillä.
Polkutunnisteen d-attribuutissa on yhteensä 10 komentoa, ja seuraavat 5 komentoa ovat perus- ja suhteellisen yksinkertaisia.
M siirtyy (moveTo) x,y aloituspistekoordinaattiin
Z-läheinen polku yhdistää polun alku- ja päätepisteet suorassa linjassa
L lineTo: Nykyinen solmu on yhdistetty suoraan määriteltyyn (x,y) solmuun.
H vaakasuora x pitää nykyisen pisteen y-koordinaatin vakiona, ja x-akseli siirtyy kohti x, muodostaen vaakasuoran viivan
V-pystysuora viiva y pitää nykyisen pisteen x-koordinaatit muuttumattomina, ja y-akseli siirtyy y:lle muodostaen pystysuoran viivan
M ja L
Katsotaanpa toista esimerkkiä M:stä ja L:stä
<polku d="M30,30 L170,30 L30,170 L170,170"></path>
Pisteestä A (30, 30) suoraviiva piirretään pisteeseen B (170, 30), sitten suoraan pisteeseen C (30, 170) ja lopulta suoraan pisteeseen D (170, 170), ja lopuksi muodostuu Z-muotoinen polku.
Täyttövaikutus ja Z
<polku d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="keltainen"></path>
Tässä polun kuvauksessa on kaksi M:ää, joten yhdessä polussa esiintyy kaksi suhteellisen itsenäistä polkua, ensimmäinen polku on sama kuin yllä olevassa esimerkissä, joka on Z-muotoinen.
Toinen polku on suorakulmio, jossa kuvauksessa näkyy Z-komento, mikä osoittaa, että se yhdistää polun alun ja lopun.
Lisäksi tässä määritellään polun täyttöominaisuus, ja näemme, että täyttö vaikuttaa riippumatta siitä, onko polku suljettu vai ei.
H ja V
Lopuksi tarkastellaan kahta komentoa H ja V, jotka ovat itse asiassa L-komennon lyhenne silloin, kun x- tai y-akseli pysyy muuttumattomana, joten seuraavat kaksi päätä kuvataan ja piirretty kuva on sama.
<polku d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="keltainen"></path>
<polku d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="keltainen"></path>
|
Julkaistu 14.8.2017 13.15.15
|
|
|
