Starp SVG formas tagiem ceļš ir visspēcīgākais, un apgūšanas ceļš ir pietiekams, lai risinātu izplatītas zīmēšanas problēmas.
Vispirms apskatīsim ceļa taga pamata lietojumu:
<ceļš d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Ceļa tags definē ceļu, izmantojot rekvizītu d, kas definē informāciju, kas sastāv no virknes, un ceļu var definēt arī ar aizpildījuma un gājiena atribūtiem, lai definētu aizpildījumu un apmali.
D atribūta informācija faktiski nav sarežģīta, tā sastāv no burtiem un cipariem, skaitļi apzīmē koordinātu punktus, un burti ir atbildīgi par to, kā savienot šos koordinātu punktus. Piemēram, iepriekš minētajā piemērā M apzīmē sākuma punktu un L apzīmē taisnas līnijas savienojumu, tāpēc d informāciju var interpretēt šādi:
M100,100 -> sākas (100,100) koordinātu punktā
L200,200 -> Uzzīmējiet taisnu līniju no (100,100) līdz (200,200).
L200,400 -> Uzzīmējiet taisnu līniju no (200,200) līdz (200,400).
Ceļa taga d atribūtā kopumā ir 10 komandas, kuras var izmantot, un šādas 5 komandas ir pamata un salīdzinoši vienkāršas.
M pārvietojas uz (pārvietot uz) x,y sākuma punkta koordinātām
Z closepath savieno ceļa sākuma un beigu punktus taisnā līnijā
L lineTo: pašreizējais mezgls ir taisnā līnijā savienots ar norādīto (x,y) mezglu
H horizontālā līnija x saglabā pašreizējā punkta y koordinātu nemainīgu, un x ass pārvietojas uz x, veidojot horizontālu līniju
V vertikālā līnija y saglabā pašreizējā punkta x koordinātas nemainīgas, un y ass pārvietojas uz y, veidojot vertikālu līniju
M un L
Apskatīsim vēl vienu M un L piemēru
<ceļš d="M30,30 L170,30 L30,170 L170,170"></path>
No punkta A (30, 30) taisna līnija tiek novilkta uz punktu B (170, 30), pēc tam taisni uz punktu C (30, 170) un pēc tam taisni uz punktu D (170, 170), un visbeidzot veido Z formas ceļu.
Aizpildījuma efekts un Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="dzeltens"></path>
Šajā ceļa aprakstā ir divi M, tāpēc vienā ceļā parādās divi relatīvi neatkarīgi ceļi, pirmais ceļš ir tāds pats kā iepriekš minētais piemērs, kas ir Z formas.
Otrais ceļš ir taisnstūris ar komandu Z, kas parādās aprakstā, norādot, ka tas savieno ceļa sākumu un beigas.
Turklāt šeit mēs definējam ceļa aizpildījuma rekvizītu, un jūs varat redzēt, ka aizpildījums stāsies spēkā neatkarīgi no tā, vai ceļš ir slēgts vai nē.
H un V
Visbeidzot, apskatīsim divas komandas H un V, kas faktiski ir L komandas saīsinājums, kad x vai y ass paliek nemainīga, tāpēc tiek aprakstīti šādi divi gali un zīmētais attēls ir vienāds.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="dzeltens"></path>
<ceļš d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="dzeltens"></path>
|
Publicēts 14.08.2017 13:15:15
|
|
|
