Blant SVG-formtaggene er sti den kraftigste, og mastering path er nok til å håndtere vanlige tegneproblemer.
La oss først se på den grunnleggende bruken av sti-taggen:
<sti d="M100,100 L200,200 L200,400" fyll="#333" strek="#000" />
Sti-taggen definerer stien gjennom egenskapen d, som definerer informasjonen bestående av en streng, og stien kan også defineres av fill- og strekattributtene for å definere fyll og kant.
Informasjonen om d-attributtet er faktisk ikke komplisert, det består av bokstaver og tall, tall representerer koordinatpunkter, og bokstaver er ansvarlige for å representere hvordan disse koordinatpunktene skal kobles. For eksempel, i eksempelet ovenfor, representerer M startpunktet og L en rett linjeforbindelse, så informasjonen i d kan tolkes slik:
M100,100 -> starter ved koordinatpunktet (100,100)
L200 200 -> Tegn en rett linje fra (100 100) til (200 200).
L200 400 -> Tegn en rett linje fra (200 200) til (200 400).
I d-attributtet til sti-taggen finnes det totalt 10 kommandoer som kan brukes, og de følgende 5 kommandoene er grunnleggende og relativt enkle.
M beveger seg til (flyttertil) x,y startpunktkoordinater
Z closepath forbinder start- og endepunktene på stien i en rett linje
L lineTo: Den nåværende noden er koblet i en rett linje til den spesifiserte (x,y) noden
H horisontal linje x holder y-koordinaten til det nåværende punktet konstant, og x-aksen beveger seg mot x, og danner en horisontal linje
V vertikal linje y holder x-koordinatene til det nåværende punktet uendret, og y-aksen beveger seg mot y, og danner en vertikal linje
M og L
La oss se på et annet eksempel med M og L
<sti d="M30,30 L170,30 L30,170 L170,170"></path>
Fra punkt A (30, 30) trekkes den rette linjen til punkt B (170, 30), deretter rett til punkt C (30, 170), og så rett til punkt D (170, 170), og danner til slutt en Z-formet sti.
Fylleffekt, og Z
<sti d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fyll="gul"></path>
Det er to M-er i denne stibeskrivelsen, så i én sti dukker to relativt uavhengige stier opp, den første stien er den samme som i eksempelet over, som er Z-formet.
Den andre stien er et rektangel med Z-kommandoen som vises i beskrivelsen, noe som indikerer at den forbinder begynnelsen og slutten av stien.
I tillegg definerer vi her fylleegenskapen for stien, og du kan se at fyllingen vil tre i kraft uansett om stien er lukket eller ikke.
H og V
Til slutt, la oss se på de to kommandoene H og V, som faktisk er forkortelsen av L-kommandoen når x- eller y-aksen forblir uendret, så de to endene beskrives og det tegnede bildet er det samme.
<sti d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fyll="gul"></path>
<sti d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fyll="gul"></path>
|
Publisert på 14.08.2017 13:15:15
|
|
|
