Bland SVG-formtaggarna är path den mest kraftfulla, och mastering path räcker för att hantera vanliga ritproblem.
Låt oss först titta på den grundläggande användningen av path-taggen:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Vägtaggen definierar vägen genom egenskapen d, som definierar informationen bestående av en sträng, och sökvägen kan också definieras av fill- och stroke-attributen för att definiera fill och border.
Informationen om d-attributet är egentligen inte komplicerat, det består av bokstäver och siffror, siffror representerar koordinatpunkter och bokstäver ansvarar för att ange hur dessa koordinatpunkter ska kopplas samman. Till exempel, i exemplet ovan, representerar M startpunkten och L en rak linjeförbindelse, så informationen i d kan tolkas så här:
M100,100 -> börjar vid koordinatpunkten (100,100)
L200 200 -> Rita en rak linje från (100 100) till (200 200).
L200 400 -> Dra en rak linje från (200 200) till (200 400).
I d-attributet för path-taggen finns totalt 10 kommandon som kan användas, och följande 5 kommandon är grundläggande och relativt enkla.
M flyttar till (flyttaTill) x,y startpunktkoordinater
Z-närstig förbinder start- och slutpunkterna på stigen i en rak linje
L lineTo: Den aktuella noden är kopplad i en rak linje till den angivna (x,y) noden
H horisontell linje x håller y-koordinaten för den aktuella punkten konstant, och x-axeln rör sig mot x, vilket bildar en horisontell linje
V vertikal linje y behåller x-koordinaterna för den aktuella punkten oförändrade, och y-axeln flyttas mot y, vilket bildar en vertikal linje
M och L
Låt oss titta på ett annat exempel med M och L
<bana d="M30,30 L170,30 L30,170 L170,170"></path>
Från punkt A (30, 30) dras den raka linjen till punkt B (170, 30), sedan rakt fram till punkt C (30, 170), och därefter rakt fram till punkt D (170, 170), och slutligen bildas en Z-formad väg.
Fylleffekt, och Z
<bana d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fyll="gul"></path>
Det finns två M:n i denna vägbeskrivning, så i en väg uppstår två relativt oberoende vägar, den första vägen är densamma som exemplet ovan, som är Z-formad.
Den andra vägen är en rektangel med Z-kommandot som visas i beskrivningen, vilket indikerar att den kopplar samman början och slutet av vägen.
Dessutom definierar vi här fyllningsegenskapen för vägen, och du kan se att fyllningen träder i kraft oavsett om stigen är stängd eller inte.
H och V
Slutligen, låt oss titta på de två kommandona H och V, som faktiskt är förkortningen av L-kommandot när x- eller y-axeln förblir oförändrad, så följande två ändar beskrivs och den ritade bilden är densamma.
<bana d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fyll="gul"></path>
<bana d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fyll="gul"></path>
|
Publicerad på 2017-08-14 13:15:15
|
|
|
