Blandt SVG-formtags er sti den mest kraftfulde, og mastering path er nok til at håndtere almindelige tegneproblemer.
Lad os først se på den grundlæggende brug af sti-tagget:
<sti d="M100,100 L200,200 L200,400" fyld="#333" streg="#000" />
Sti-tagget definerer stien gennem egenskaben d, som definerer informationen bestående af en streng, og stien kan også defineres ved fill- og stregattributterne for at definere fill og kant.
Informationen om d-attributten er faktisk ikke kompliceret; den består af bogstaver og tal, tal repræsenterer koordinatpunkter, og bogstaver er ansvarlige for at angive, hvordan disse koordinatpunkter forbindes. For eksempel repræsenterer M i ovenstående eksempel udgangspunktet, og L repræsenterer en lige linjeforbindelse, så informationen i d kan fortolkes således:
M100,100 -> starter ved koordinatpunktet (100,100)
L200.200 -> Tegn en lige linje fra (100.100) til (200.200).
L200.400 -> Tegn en lige linje fra (200.200) til (200.400).
I d-attributten for sti-tagget er der i alt 10 kommandoer, der kan bruges, og de følgende 5 kommandoer er grundlæggende og relativt simple.
M bevæger sig til (flyttil) x,y startpunktkoordinater
Z-closepath forbinder start- og slutpunkterne på stien i en lige linje
L lineTo: Den nuværende node er forbundet i en lige linje til den specificerede (x,y) node
H horisontal linje x holder y-koordinaten for det aktuelle punkt konstant, og x-aksen bevæger sig mod x, hvilket danner en vandret linje
V vertikal linje y holder x-koordinaterne for det nuværende punkt uændrede, og y-aksen bevæger sig mod y, hvilket danner en vertikal linje
M og L
Lad os se på et andet eksempel med M og L
<sti d="M30,30 L170,30 L30,170 L170,170"></path>
Fra punkt A (30, 30) tegnes den lige linje til punkt B (170, 30), derefter lige til punkt C (30, 170), og derefter lige til punkt D (170, 170), og danner til sidst en Z-formet sti.
Fyldeffekt og Z
<sti d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fyld="gul"></path>
Der er to M'er i denne stibeskrivelse, så i én sti optræder to relativt uafhængige stier, den første sti er den samme som eksemplet ovenfor, som er Z-formet.
Den anden sti er et rektangel med Z-kommandoen i beskrivelsen, hvilket indikerer, at den forbinder begyndelsen og slutningen af stien.
Derudover definerer vi her fyld-egenskaben for stien, og du kan se, at fyldningen træder i kraft uanset om stien er lukket eller ej.
H og V
Lad os endelig se på de to kommandoer H og V, som faktisk er forkortelsen af L-kommandoen, når x- eller y-aksen forbliver uændret, så de følgende to ender beskrives, og det tegnede billede er det samme.
<sti d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fyld="gul"></path>
<sti d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fyld="gul"></path>
|
Opslået på 14/08/2017 13.15.15
|
|
|
