Dintre etichetele de formă SVG, path este cea mai puternică, iar masterizarea căii este suficientă pentru a rezolva problemele comune de desen.
Să aruncăm o privire mai întâi asupra utilizării de bază a etichetei path:
<path d="M100,100 L200,200 L200,400" fill="#333" cursă="#000" />
Eticheta de cale definește calea prin proprietatea d, care definește informația formată dintr-un șir, iar calea poate fi definită și de atributele de umplere și linie pentru a defini umplerea și marginea.
Informația atributului d nu este de fapt complicată, este compusă din litere și cifre, numerele reprezintă puncte de coordonate, iar literele sunt responsabile pentru modul în care se conectează aceste puncte de coordonate. De exemplu, în exemplul de mai sus, M reprezintă punctul de plecare, iar L reprezintă o conexiune pe linie dreaptă, astfel încât informația lui d poate fi interpretată astfel:
M100,100 -> începe de la punctul de coordonate (100,100)
L200,200 -> Trasați o linie dreaptă de la (100,100) la (200,200).
L200.400 -> Trasează o linie dreaptă de la (200.200) la (200.400).
În atributul d al etichetei de drum, pot fi folosite în total 10 comenzi, iar următoarele 5 comenzi sunt simple și de bază.
M se mută la coordonatele punctului de pornire (move-to) x,y
Traseul apropiat Z leagă punctele de început și de sfârșit ale traseului într-o linie dreaptă
L lineTo: Nodul curent este conectat în linie dreaptă la nodul specificat (x,y)
Dreapta orizontală H x menține coordonata y a punctului curent constantă, iar axa x se mută pe x, formând o linie orizontală
V linia verticală y păstrează neschimbate coordonatele x ale punctului curent, iar axa y se mută pe y, formând o linie verticală
M și L
Să vedem un alt exemplu de M și L
<drum d="M30,30 L170,30 L30,170 L170,170"></path>
De la punctul A (30, 30), linia dreaptă este trasată până la punctul B (170, 30), apoi drept până la punctul C (30, 170), apoi drept până la punctul D (170, 170), formând în final un traseu în formă de Z.
Efect de umplere și Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="galben"></path>
Există două M în această descriere a traseului, deci într-o cale apar două căi relativ independente, prima cale fiind aceeași cu exemplul de mai sus, care are formă de Z.
A doua cale este un dreptunghi cu comanda Z apărând în descriere, indicând că conectează începutul și sfârșitul traseului.
În plus, aici definim proprietatea de umplere pentru cale, iar aceasta va avea efect indiferent dacă calea este închisă sau nu.
H și V
În final, să aruncăm o privire la cele două comenzi H și V, care sunt de fapt abrevierea comenzii L atunci când axa x sau y rămâne neschimbată, astfel încât următoarele două capete sunt descrise, iar ilustrația desenată este aceeași.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="galben"></path>
<traseul d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" completează "galben"></path>
|
Postat pe 14.08.2017 13:15:15
|
|
|
