Denne egenskapen definerer en sti.
bruk
Kategoristi-definisjonsattributter
verdi
Variasjon Ja
Spesifikasjonsdokumentasjon SVG 1.1 (2. utgave)
Egenskapen d er faktisk en streng som inneholder en serie stibeskrivelser. Disse stiene består av følgende instruksjoner:
- Flytting
- Lineto
- Curveto
- Arcto
- ClosePath
Disse kombineres i en streng. Disse ulike kommandoene er små og små bokstaver; En stor kommando indikerer at parameterne er absolutte posisjoner, mens små kommandoer indikerer et punkt relativt til gjeldende posisjon. En negativ verdi kan spesifiseres som en parameter for kommandoen: den negative vinkelen vil være mot klokken, og de absolutte x- og y-posisjonene vil bli betraktet som negative koordinater. Den negative relative x-verdien vil bevege seg mot venstre, mens den negative relative y-verdien vil bevege seg oppover.
Flytting
Moveto-kommandoen kan sees på som å plukke opp en tegnepenn og lande et annet sted. Det er ikke noe linjestykke tegnet mellom forrige punkt og dette spesifiserte punktet. Det er lurt å starte en sti med en Moveto-kommando, fordi uten en initialisert Moveto vil startpunktet være der forrige operasjon skjedde, noe som kan føre til ubestemt oppførsel.
Syntaks:
M x,y her er x og y absolutte koordinater, som representerer henholdsvis horisontale og vertikale koordinater.
m dx, dy her er dx og dy avstandene i forhold til det nåværende punktet, henholdsvis til høyre og ned.
Eksempel:
På absolutt posisjon x=50, y= 100:<sti d="M50,100..." />
Flytt 50 til høyre, 100 ned: <sti d="m50,100..." />
Lineto
I motsetning til Moveto-kommandoen, vil Lineto-kommandoen tegne et rett segment. Dette rette linjesegmentet beveger seg fra nåværende posisjon til spesifisert posisjon. Syntaksen til den innebygde Lineto-kommandoen er "L x, y" eller "l dx, dy", hvor x og y er absolutte koordinater, og dx og dy er avstandene til henholdsvis høyre og ned. Det finnes også bokstavene H og V, som angir henholdsvis horisontale og vertikale bevegelser. De har samme syntaks som L, og deres lille versjon er relativ avstand, mens store bokstaver er absolutt posisjon.
Curveto
Curvto-kommandoen spesifiserer en Bézier-kurve. Det finnes to typer Bézier-kurver: kubiske og kvadratiske. En kvadratisk Bézier-kurve er en spesiell kubisk Bézier-kurve hvor de to endene av kontrollpunktet er like. Syntaksen til en kvadratisk Bézier-kurve er "Q cx, cy x, y" eller "q dcx, dcy dx, dy". Cx og Cy er begge absolutte koordinater for kontrollpunkter, mens DCX og DCY er avstandene til kontrollpunkter i henholdsvis X- og Y-retningene.
Den kubiske Bézier-kurven følger samme konsept som den kvadratiske Bézier-kurven, men den må ta hensyn til to kontrollpunkter. Syntaksen til den kubiske Bézier-kurven er: «C c1x, c1y c2x, c2y x, y» eller «c dc1x, dc1y dc2x, dc2y dx, dy», hvor c1x, c1y og c2x, c2y er de absolutte koordinatene til kontrollpunktene for henholdsvis start- og sluttpunktet. DC1X, DC1Y, og DC2X, DC2Y er relative til startpunktet, ikke til sluttpunktet. DX og dy er avstandene til henholdsvis høyre og ned.
For å koble sammen jevne Bézier-kurver kan du også bruke T- og S-kommandoene. Syntaksen deres er enklere enn andre Curveto-kommandoer fordi den antar at det første kontrollpunktet er en refleksjon av det forrige kontrollpunktet på det forrige, eller at det faktisk er det forrige punktet hvis det ikke finnes noe tidligere kontrollpunkt. Syntaksen til T er "T x,y" eller "t dx,dy", som tilsvarer absolutte koordinater og relative avstander henholdsvis, og brukes til å lage en kvadratisk Bézier-kurve. S brukes til å lage en kubisk Bézier-kurve, syntaksen er "S cx, cy x, y" eller "s dcx, dcy dx, dy", hvor (d)cx spesifiserer det andre kontrollpunktet.
Til slutt kan alle Bézier-kurvekommandoene lage en flersidig Bézier-graf, initialisere kommandoen først, og deretter spesifisere alle parameterne flere ganger for å lage en flersidig Bézier-graf. Derfor kan følgende to kommandoer skape nøyaktig samme sti:
Arcto
Noen ganger er det enklere å beskrive en elliptisk buekurvebane enn en Bézier-kurvebane. Til syvende og sist støtter sti-elementet Arcto-kommandoen. Sentrum av buen beregnes av andre variabler. En arcto-deklarasjon er relativt en gjentakelse av Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Ved dekonstruering er rx og ry radiusene i henholdsvis x- og y-retningene, og verdien av LargeArcFlag er 0 eller 1 for å avgjøre om man skal tegne en liten bue (0) eller en stor bue (1). SweepFlag er også enten 0 eller 1, som brukes til å avgjøre om buen er med klokken (1) eller mot klokken (0). x og y er koordinatene til destinasjonen. Selv om xAxisRotate støtter endring av orienteringen til x-aksen i forhold til den nåværende referanserammen, ser denne parameteren ikke ut til å ha særlig effekt i Gecko 7.
ClosePath
ClosePath-kommandoen vil ganske enkelt tegne en rett linje fra det nåværende punktet til det første punktet i den nåværende stien. Det er den enkleste kommandoen og kommer ikke med noen parametere. Den følger den korteste lineære stien til startpunktet, og hvis andre stier faller på denne stien, krysser de mulige stiene hverandre. Syntaksen er "Z" eller "z", og begge skrivemetodene har samme funksjon.
Element
Følgende elementer kan bruke d-attributtet:
De samme reglene kan brukes <animate>på animasjonsstier.
Påminnelse
Origo (koordinatsystemet 0,0 punkter) er ofte øverst til venstre i konteksten. <glyph>Imidlertid er grunnstoffets opprinnelse i nedre venstre hjørne av postboksen.
Et komma er tillatt mellom to tall, men ikke noe annet sted.
eksempel
<svg versjon="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 M50H0v50h50V0z"/>
</svg>
For å demonstrere hva d="M37,17v15H14V17H37z M50,0H0v50h50V0z" faktisk betyr, la oss diskutere hver underpunkt i denne strengen.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || H50 || V0 || z"
d=
Denne egenskapen inneholder strengene som utgjør hele SVG-en.
M37,17
M er forkortelsen for MoveTo. Den store "M" betyr absolutte koordinater, og den lille "m" betyr relativ avstand. Det innebærer at det er basert på startkoordinatene, linjen er inne i boksen, og du starter i øvre høyre hjørne av rektanglet inne i boksen.
37 er forkortelsen for startposisjonen for svg, med 37 piksler på X-aksen.
17 Start svg-posisjon, ved 17 piksler på y-aksen.
v15
V står for vertikal. Den store V angir absolutte koordinater, og den lille V angir den relative lengden og avstanden. dx/dy og x/y kan brukes i de tilsvarende posisjonene H/V og h/v.
Her er det representert å tegne en vertikal linje på 15 piksler i forhold til en gitt koordinat. Det betyr at du tegner 15 piksler ned til koordinatene 37,32.
H14
H står for nivå, som er absolutte koordinater fordi det skrives med stor forbokstav.
Fra slutten av v15 tegnes en horisontal linje til absolutt koordinat 14 er nådd, og avsluttes linjetegningen når den når x-koordinat 14. Slagene er plassert på koordinatene 14,32.
V17
Akkurat som før, start fra slutten av forrige linje og tegn en vertikal linje til du når y-akse koordinat 17. Slagene er plassert på koordinatene 14,17.
H37
Til slutt, start fra 14,17, tegn en horisontal linje til du når x-akse koordinat 37. Slaget er plassert på koordinatene 37,17 (verdien M)
z
Både liten og stor Z lukker en serie SVG-segmenter.
,
Et komma starter neste streng med enkle vektorgrafiske segmenter. Den neste serien av enkle vektorlinjesegmenter vil danne den ytre boksen.
M50,0
Start på x-akse 50 og y-akse 0.
H0
Tegn en rett linje til (0,0).
v50
Tegn en vertikal linje på 0,0 piksler i forhold til 50. Denne linjen trekkes til (0,50).
H50
Tegn en horisontal linje på 50 piksler i forhold til (0,-50). Denne linjen trekkes til høyre til (50,50).
V0
Tegn en vertikal linje til du når y-akse koordinat 0. Dette vil trekke en linje til (50,0), som er verdien av M.
z
Både liten og stor Z lukker en serie SVG-segmenter.
Legg ved koden:
Til slutt er lenken til dokumentet vedlagt: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Publisert på 04.05.2018 11:29:47
|
|
|
|
