SVG kujusiltide seas on rada kõige võimsam ning raja valdamine on piisav, et lahendada levinud joonistusprobleeme.
Vaatame esmalt tee sildi põhilist kasutust:
<path d="M100,100 L200,200 L200,400" täite="#333" stroke="#000" />
Tee silt määratleb tee omaduse d kaudu, mis määratleb info, mis koosneb stringist, ning teed saab määratleda ka täite- ja jooneomadustega, et määrata täite ja ääre.
d atribuudi info ei ole tegelikult keeruline, see koosneb tähtedest ja numbritest, numbrid tähistavad koordinaatpunkte ning tähed vastutavad nende koordinaatpunktide ühendamise eest. Näiteks ülaltoodud näites tähistab M alguspunkti ja L sirgjoonelist ühendust, seega võib d informatsiooni tõlgendada järgmiselt:
M100,100 -> algab koordinaatpunktist (100,100)
L200,200 -> Joonista sirge joon (100,100) kuni (200,200).
L200 400 -> Joonista sirge joon (200 200) kuni (200 400).
Tee sildi d atribuudis on kokku 10 käsku, mida saab kasutada, ning järgmised 5 käsku on lihtsad ja suhteliselt lihtsad.
M liigub (moveTo) x,y alguspunkti koordinaatidele
Z-lähedane tee ühendab tee algus- ja lõpp-punktid sirgjoonena
L lineTo: Praegune sõlm on ühendatud sirgjooneliselt määratud (x,y) sõlmega
H horisontaalne joon x hoiab voolupunkti y-koordinaati konstantsena ning x-telg liigub x-ni, moodustades horisontaalse joone
V vertikaalne joon y hoiab praeguse punkti x koordinaadid muutumatuna ning y-telg liigub y-le, moodustades vertikaalse joone
M ja L
Vaatame veel üht näidet M-st ja L-st
<tee d="M30,30 L170,30 L30,170 L170,170"></path>
Punktist A (30, 30) tõmmatakse sirge joon punkti B (170, 30), seejärel otse punkti C (30, 170) ja lõpuks punkti D (170, 170) ning lõpuks moodustatakse Z-kujuline tee.
Täitetoime ja Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="kollane"></path>
Selles teekirjelduses on kaks M-i, seega ühes teekonnas ilmuvad kaks suhteliselt sõltumatut rada, esimene tee on sama mis eeltoodud näites, mis on Z-kujuline.
Teine tee on ristkülik, mille kirjelduses ilmub käsk Z, mis näitab, et see ühendab tee alguse ja lõpu.
Lisaks defineerime siin tee täitmise omaduse ning näete, et täitmine avaldub sõltumata sellest, kas tee on suletud või mitte.
H ja V
Lõpuks vaatame kahte käsku H ja V, mis on tegelikult L-käsu lühend, kui x või y telg jääb muutumatuks, nii et järgmised kaks otsa on kirjeldatud ja joonistatud pilt on sama.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="kollane"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="kollane"></path>
|
Postitatud 14.08.2017 13:15:15
|
|
|
