Denne egenskab definerer en sti.
brug
Kategoristi-definitionsattributter
værdi
Variabilitet Ja
Specifikationsdokumentation SVG 1.1 (2. udgave)
Egenskaben d er faktisk en streng, der indeholder en række stibeskrivelser. Disse stier består af følgende instruktioner:
- Flytning
- Lineto
- Curveto
- Arcto
- ClosePath
Disse kombineres i en streng. Disse forskellige kommandoer er kasusfølsomme; En stor kommando angiver, at dens parametre er absolutte positioner, mens små kommandoer angiver et punkt i forhold til den aktuelle position. En negativ værdi kan specificeres som parameter for kommandoen: den negative vinkel vil være mod uret, og de absolutte x- og y-positioner vil blive betragtet som negative koordinater. Den negative relative x-værdi vil bevæge sig til venstre, mens den negative relative y-værdi vil bevæge sig opad.
Flytning
Moveto-kommandoen kan betragtes som at samle en tegnepen op og lande et andet sted. Der er ikke trukket noget linjestykke mellem det forrige punkt og dette angivne punkt. Det er en god idé at starte en sti med en Moveto-kommando, fordi uden en initialiseret Moveto vil udgangspunktet være der, hvor den forrige operation fandt sted, hvilket kan føre til ubestemt adfærd.
Syntaks:
M x,y her er x og y absolutte koordinater, der repræsenterer henholdsvis horisontale og vertikale koordinater.
M dx, dy her dx og dy er afstandene i forhold til det aktuelle punkt, henholdsvis til højre og nedad.
Eksempel:
Ved absolut position x=50 er y= 100:<sti d="M50,100..." />
Flyt 50 til højre, 100 ned: <sti d="m50,100..." />
Lineto
I modsætning til Moveto-kommandoen vil Lineto-kommandoen tegne et lige segment. Dette lige linjesegment bevæger sig fra den nuværende position til den angivne position. Syntaksen for den oprindelige Lineto-kommando er "L x, y" eller "l dx, dy", hvor x og y er absolutte koordinater, og dx og dy er afstandene til henholdsvis højre og nedad. Der er også bogstaverne H og V, som angiver henholdsvis horisontale og vertikale bevægelser. De har samme syntaks som L, og deres lille version er relativ afstand, mens store bogstaver er absolut position.
Curveto
Curvto-kommandoen specificerer en Bézier-kurve. Der findes to typer Bézier-kurver: kubiske og kvadratiske. En kvadratisk Bézier-kurve er en speciel kubisk Bézier-kurve, hvor de to ender af kontrolpunktet er ens. Syntaksen for 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 kontrolpunkter, mens DCX og DCY er afstandene til kontrolpunkter i henholdsvis X- og Y-retningerne.
Den kubiske Bézier-kurve følger samme koncept som den kvadratiske Bézier-kurve, men den skal tage hensyn til to kontrolpunkter. Syntaksen for den kubiske Bézier-kurve 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 koordinater for kontrolpunkterne for henholdsvis start- og slutpunkterne. DC1X, DC1Y og DC2X, DC2Y er relative til udgangspunktet, ikke til slutpunktet. DX og dy er afstandene til henholdsvis højre og nedad.
For at forbinde glatte Bézier-kurver kan du også bruge T- og S-kommandoerne. Deres syntaks er enklere end andre Curveto-kommandoer, fordi den antager, at det første kontrolpunkt er en afspejling af det tidligere kontrolpunkt på det forrige, eller at det faktisk er det forrige punkt, hvis der ikke er noget tidligere kontrolpunkt. Syntaksen for T er "T x,y" eller "t dx,dy", hvilket svarer til henholdsvis absolutte koordinater og relative afstande, og bruges til at skabe en kvadratisk Bézier-kurve. S bruges til at skabe en kubisk Bézier-kurve, syntaksen er "S cx, cy x, y" eller "s dcx, dcy dx, dy", hvor (d)cx angiver det andet kontrolpunkt.
Endelig kan alle Bézier-kurvekommandoerne skabe en flersidet Bézier-graf, initialisere kommandoen først og derefter specificere alle parametrene flere gange for at skabe en flersidet Bézier-graf. Derfor kan følgende to kommandoer skabe nøjagtig samme sti:
Arcto
Nogle gange er det enklere at beskrive en elliptisk buekurvebane end en Bézier-kurvebane. I sidste ende understøtter sti-elementet Arcto-kommandoen. Buens centrum beregnes ud fra andre variable. En arcto-deklaration er relativt set en gentagelse af Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Ved dekonstruering er rx og ry radiuserne i henholdsvis x- og y-retningerne, og værdien af LargeArcFlag er 0 eller 1 for at afgøre, om man skal tegne en lille bue (0) eller en stor bue (1). SweepFlag er også enten 0 eller 1, hvilket bruges til at afgøre, om buen er med uret (1) eller mod uret (0). x og y er koordinaterne for destinationen. Selvom xAxisRotate understøtter ændring af x-aksens orientering i forhold til den aktuelle referenceramme, ser denne parameter ikke ud til at have den store effekt i Gecko 7.
ClosePath
ClosePath-kommandoen vil blot tegne en lige linje fra det nuværende punkt til det første punkt i den nuværende sti. Det er den simpleste kommando og kommer ikke med nogen parametre. Den følger den korteste lineære sti til startpunktet, og hvis andre stier falder på denne sti, krydser de mulige stier hinanden. Syntaksen er "Z" eller "z", og begge skrivemetoder har samme funktion.
Element
Følgende elementer kan bruge d-attributtet:
De samme regler kan anvendes <animate>på animationsstier.
Påmindelse
Origo (koordinatsystemet 0,0 punkter) er ofte det øverste venstre hjørne af konteksten. <glyph>Dog er elementets oprindelse i nederste venstre hjørne af dens brevkasse.
Et komma er tilladt mellem to tal, men ikke andre steder.
eksempel
<svg version="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">
<stifyld="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
For at demonstrere, hvad d="M37,17v15H14V17H37z M50,0H0v50h50V0z" egentlig betyder, lad os diskutere hver underpunkt i denne streng.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Denne egenskab indeholder strengene, der udgør hele SVG'en.
M37,17
M er forkortelsen for MoveTo. Den store "M" betyder absolutte koordinater, og den lille "m" betyder relativ afstand. Det indebærer, at det er baseret på startkoordinaterne, linjen er inde i boksen, og du starter i øverste højre hjørne af rektanglet inde i boksen.
37 er forkortelsen for start-svg-positionen, med 37 pixels på X-aksen.
17 Start svg-position, ved 17 pixels på y-aksen.
v15
V står for vertikal. Store V angiver absolutte koordinater, og lille V angiver den relative længde og afstand. dx/dy og x/y kan bruges i de tilsvarende positioner H/V og h/v.
Her er det repræsenteret ved at tegne en lodret linje på 15 pixels i forhold til en given koordinat. Det betyder, at du tegner 15 pixels ned til koordinaterne 37,32.
H14
H står for niveau, som er absolutte koordinater, fordi det er skrevet med stort.
Fra slutningen af v15 tegnes en horisontal linje, indtil absolut koordinat 14 nås, og afsluttes linjetegningen, når den når x-koordinat 14. Slagene er placeret på koordinaterne 14,32.
V17
Ligesom før starter du fra slutningen af den forrige linje og tegner en lodret linje, indtil du når y-akse koordinat 17. Slagene er placeret på koordinaterne 14,17.
H37
Endelig, start fra 14,17, tegn en vandret linje, indtil du når x-akse koordinat 37. Slaget er placeret på koordinaterne 37,17 (værdien M)
z
Både små og store Z lukker en række SVG-segmenter.
,
Et komma starter den næste streng af simple vektorgrafiske segmenter. Den næste række af simple vektorlinjesegmenter vil danne den ydre boks.
M50,0
Start ved x-akse 50 og y-akse 0.
H0
Tegn en lige linje indtil (0,0).
v50
Tegn en lodret linje på 0,0 pixels i forhold til 50. Denne linje vil blive trukket til (0,50).
H50
Tegn en horisontal linje på 50 pixels i forhold til (0,-50). Denne linje vil blive trukket til højre til (50,50).
V0
Tegn en lodret linje, indtil du når y-akse koordinat 0. Dette vil tegne en linje til (50,0), som er værdien af M.
z
Både små og store Z lukker en række SVG-segmenter.
Vedhæft koden:
Endelig er linket til dokumentet vedhæftet: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Opslået på 04/05/2018 11.29.47
|
|
|
|
