Tarp SVG formos žymų kelias yra galingiausias, o įsisavinimo kelio pakanka įprastoms piešimo problemoms išspręsti.
Pirmiausia pažvelkime į pagrindinį kelio žymos naudojimą:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Kelio žyma apibrėžia kelią per ypatybę d, kuri apibrėžia informaciją, susidedančią iš eilutės, o kelią taip pat galima apibrėžti užpildo ir brūkšnio atributais, kad būtų apibrėžtas užpildas ir kraštinė.
d atributo informacija iš tikrųjų nėra sudėtinga, ją sudaro raidės ir skaičiai, skaičiai reiškia koordinačių taškus, o raidės yra atsakingos už šių koordinačių taškų sujungimą. Pavyzdžiui, aukščiau pateiktame pavyzdyje M reiškia pradinį tašką, o L - tiesią liniją, todėl d informaciją galima interpretuoti taip:
M100,100 -> prasideda (100,100) koordinačių taške
L200,200 -> Nubrėžkite tiesią liniją nuo (100,100) iki (200,200).
L200,400 -> Nubrėžkite tiesią liniją nuo (200,200) iki (200,400).
Kelio žymos atribute d iš viso yra 10 komandų, kurias galima naudoti, o šios 5 komandos yra pagrindinės ir gana paprastos.
M pereina į (moveTo) x,y pradžios taško koordinates
Z closepath sujungia kelio pradžios ir pabaigos taškus tiesia linija
L lineTo: dabartinis mazgas tiesia linija sujungtas su nurodytu (x,y) mazgu
H horizontali linija x išlaiko dabartinio taško y koordinatę pastovią, o x ašis juda į x, sudarydama horizontalią liniją
V vertikali linija y išlaiko dabartinio taško x koordinates nepakitusias, o y ašis juda į y, sudarydama vertikalią liniją
M ir L
Pažvelkime į kitą M ir L pavyzdį
<path d="M30,30 L170,30 L30,170 L170,170"></path>
Nuo taško A (30, 30) tiesi linija nubrėžiama iki taško B (170, 30), tada tiesiai į tašką C (30, 170), o tada tiesiai į tašką D (170, 170) ir galiausiai suformuoja Z formos kelią.
Užpildymo efektas ir Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="geltona"></path>
Šiame kelio aprašyme yra du M, todėl viename kelyje atsiranda du santykinai nepriklausomi keliai, pirmasis kelias yra toks pat kaip aukščiau pateiktame pavyzdyje, kuris yra Z formos.
Antrasis kelias yra stačiakampis, kurio aprašyme rodoma komanda Z, nurodanti, kad ji jungia kelio pradžią ir pabaigą.
Be to, čia apibrėžiame kelio užpildymo ypatybę ir matote, kad užpildymas įsigalios nepriklausomai nuo to, ar kelias uždarytas, ar ne.
H ir V
Galiausiai pažvelkime į dvi komandas H ir V, kurios iš tikrųjų yra L komandos santrumpa, kai x arba y ašis lieka nepakitusi, todėl aprašomi šie du galai ir nupieštas paveikslėlis yra tas pats.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="geltona"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="geltona"></path>
|
Paskelbta 2017-08-14 13:15:15
|
|
|
