Această proprietate definește o cale.
obicei
Atribute de definire a căii de categorie
valoare
Variabilitate: Da
Documentația specificațiilor SVG 1.1 (ediția a 2-a)
Proprietatea d este de fapt un șir care conține o serie de descrieri ale căilor. Aceste căi constau în următoarele instrucțiuni:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
Acestea sunt combinate într-un fir. Aceste comenzi diferite sunt sensibile la majuscule; O comandă cu majuscule indică faptul că parametrii săi sunt poziții absolute, în timp ce comenzile cu litere mici indică un punct relativ la poziția curentă. O valoare negativă poate fi specificată ca parametru pentru comandă: unghiul negativ va fi în sens invers acelor de ceasornic, iar pozițiile absolute x și y vor fi considerate coordonate negative. Valoarea relativă negativă x se va deplasa spre stânga, în timp ce valoarea relativă negativă y va urca.
Moveto
Comanda Moveto poate fi considerată ca și cum ai ridica un stilou de desen și ai ateriza într-un alt loc. Nu există niciun segment de linie trasat între punctul anterior și acest punct specificat. Este o idee bună să începi o cale cu o comandă Moveto, deoarece fără un Moveto inițializat, punctul de pornire va fi locul unde a avut loc operația anterioară, ceea ce poate duce la comportament indeterminat.
Sintaxă:
M x, y aici x și y sunt coordonate absolute, reprezentând coordonate orizontale și verticale, respectiv.
m dx, dy aici dx și dy sunt distanțele relative la punctul curent, spre dreapta și în jos, respectiv.
Exemplu:
La poziția absolută x=50, y= 100:<drum d="M50,100..." />
Mută-te cu 50 la dreapta, 100 în jos: <drum d="m50,100..." />
Lineto
Spre deosebire de comanda Moveto, comanda Lineto va desena un segment drept. Acest segment de linie dreaptă se deplasează din poziția curentă în poziția specificată. Sintaxa comenzii native Lineto este "L x, y" sau "l dx, dy", unde x și y sunt coordonate absolute, iar dx și dy sunt distanțele spre dreapta și în jos, respectiv. Există și literele H și V, care specifică mișcări orizontale și verticale, respectiv. Au aceeași sintaxă ca L, iar versiunea lor mică este distanța relativă, iar versiunea majusculă este poziția absolută.
Curveto
Comanda Curvto specifică o curbă Bézier. Există două tipuri de curbe Bézier: cubice și quadratice. O curbă Bézier pătratică este o curbă Bézier cubică specială în care cele două capete ale punctului de control sunt identice. Sintaxa unei curbe Bézier pătratice este "Q cx, cy x, y" sau "q dcx, dcy dx, dy". Cx și Cy sunt ambele coordonate absolute ale punctelor de control, în timp ce DCX și DCY sunt distanțele punctelor de control în direcțiile X și Y, respectiv.
Curba Bézier cubică urmează același concept ca și curba Bézier cuadratică, dar trebuie să ia în considerare două puncte de control. Sintaxa curbei cubice Bézier este: "C c1x, c1y c2x, c2y x, y" sau "c dc1x, dc1y dc2x, dc2y dx, dy", unde c1x, c1y și c2x, c2y sunt coordonatele absolute ale punctelor de control ale punctelor de început și sfârșit, respectiv. DC1X, DC1Y și DC2X, DC2Y sunt relative la punctul de pornire, nu la punctul final. dx și dy sunt distanțele spre dreapta și în jos, respectiv.
Pentru a conecta curbe Bézier netede, poți folosi și comenzile T și S. Sintaxa lor este mai simplă decât a altor comenzi Curveto deoarece presupune că primul punct de control este o reflectare a punctului de control anterior pe cel anterior sau că este de fapt punctul anterior dacă nu există niciun punct de control anterior. Sintaxa lui T este "T x,y" sau "t dx,dy", care corespunde coordonatelor absolute și distanțelor relative, respectiv, și este folosită pentru a crea o curbă Bézier pătratică. S este folosit pentru a crea o curbă Bézier cubică, sintaxa fiind "S cx, cy x, y" sau "s dcx, dcy dx, dy", unde (d)cx specifică al doilea punct de control.
În final, toate comenzile cu curba Bézier pot crea un graf Bézier cu mai multe fețe, pot inițializa comanda mai întâi și apoi pot specifica toți parametrii de mai multe ori pentru a crea un graf Bézier cu mai multe fețe. Prin urmare, următoarele două comenzi pot crea exact aceeași cale:
Arcto
Uneori este mai simplu să descrii o traiectorie de curbă de arc eliptică decât o cale de curbă Bézier. La finalul zilei, elementul de cale susține comanda Arcto. Centrul arcului este calculat de alte variabile. O declarație arcto este relativ o repetiție a Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Deconstruind-o, rx și ry sunt razele din direcțiile x și y, respectiv, iar valoarea LargeArcFlag este 0 sau 1 pentru a determina dacă se trasează un arc mic (0) sau unul mare (1). SweepFlag-ul este, de asemenea, fie 0, fie 1, care este folosit pentru a determina dacă arcul este în sensul acelor de ceasornic (1) sau în sens invers acelor de ceasornic (0). x și y sunt coordonatele destinației. Deși xAxisRotate suportă schimbarea orientării axei x în raport cu sistemul de referință curent, acest parametru nu pare să aibă un efect semnificativ în Gecko 7.
ClosePath
Comanda ClosePath va trasa pur și simplu o linie dreaptă de la punctul curent până la primul punct din calea curentă. Este cea mai simplă comandă și nu vine cu niciun parametru. Urmează cea mai scurtă cale liniară până la punctul de început, iar dacă alte căi se află pe această cale, căile posibile se intersectează. Sintaxa este "Z" sau "z", iar ambele metode de scriere au aceeași funcție.
element
Următoarele elemente pot folosi atributul d:
Aceleași reguli pot fi <animate>aplicate și traseelor de animație.
Reamintire
Originea (sistemul de coordonate 0,0 puncte) este adesea colțul din stânga sus al contextului. <glyph>Totuși, originea elementului se află în colțul din stânga jos al cutiei poștale.
O virgulă este permisă între orice două numere, dar nu în altă parte.
exemplu
<SVG versiune="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Pentru a demonstra ce înseamnă de fapt d="M37,17v15H14V17H37z M50,0H0v50h50V0z", să discutăm fiecare subparagraf al acestui șir.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Această proprietate conține șirurile care alcătuiesc întregul SVG.
M37,17
M este abrevierea MoveTo. Litera "M" mare înseamnă coordonate absolute, iar "m" mic înseamnă distanță relativă. Asta implică faptul că se bazează pe coordonatele de start, linia este în interiorul cutiei, iar începi în colțul din dreapta sus al dreptunghiului din interiorul cutiei.
37 este abrevierea poziției svg de start, la 37 de pixeli pe axa X.
17 Începe poziția svg, la 17 pixeli pe axa y.
v15
V înseamnă vertical. Litera majusculă V indică coordonatele absolute, iar litera minusculă V indică lungimea și distanța relativă. dx/dy și x/y pot fi folosite în pozițiile corespunzătoare H/V și h/v.
Aici este reprezentat trasând o linie verticală de 15 pixeli față de o anumită coordonată. Înseamnă că desenezi 15 pixeli până la coordonatele 37,32.
H14
H înseamnă nivel, adică coordonate absolute deoarece este scrisă cu majusculă.
De la sfârșitul versiunii 15, trasează o linie orizontală până la coordonata absolută 14 și încheie trasarea liniei când ajunge la coordonata x 14. Tușele sunt localizate la coordonatele 14,32.
V17
La fel ca înainte, începe de la capătul liniei anterioare și trasează o linie verticală până ajungi la coordonata axei y, 17. Trasele sunt localizate la coordonatele 14, 17.
H37
În final, începând de la 14, 17, trasează o linie orizontală până ajungi la coordonata axei x 37. Curentul este localizat la coordonatele 37,17 (valoarea lui M)
z
Atât litera mică, cât și Z mare închid o serie de segmente SVG.
,
O virgulă începe următorul șir de segmente simple de grafică vectorială. Următoarea serie de segmente simple de linie vectorială va forma cutia exterioară.
M50,0
Începe de la axa x 50 și axa y 0.
H0
Trasează o linie dreaptă până la (0,0).
v50
Desenează o linie verticală de 0,0 pixeli față de 50. Această linie va fi trasată până la (0,50).
H50
Desenează o linie orizontală de 50 de pixeli față de (0,-50). Această linie va fi trasată spre dreapta către (50,50).
V0
Desenează o linie verticală până ajungi la coordonata 0 pe axa y. Aceasta va trasa o linie la (50,0), care este valoarea lui M.
z
Atât litera mică, cât și Z mare închid o serie de segmente SVG.
Atașează codul:
În final, linkul către document este atașat: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Postat pe 04.05.2018 11:29:47
|
|
|
|
