Denna egenskap definierar en väg.
användning
Attribut för kategorivägsdefinitionen
värde
Variabilitet Ja
Specifikationsdokumentation SVG 1.1 (2:a upplagan)
Egenskapen d är faktiskt en sträng som innehåller en serie vägbeskrivningar. Dessa vägar består av följande instruktioner:
- Flytt till
- Lineto
- Curveto
- Arcto
- ClosePath
Dessa kombineras i en sträng. Dessa olika kommandon är kasuskänsliga; Ett stort kommando anger att dess parametrar är absoluta positioner, medan små kommandon anger en punkt relativt den aktuella positionen. Ett negativt värde kan specificeras som en parameter för kommandot: den negativa vinkeln kommer att vara moturs, och de absoluta x- och y-positionerna kommer att betraktas som negativa koordinater. Det negativa relativa x-värdet kommer att röra sig åt vänster, medan det negativa relativa y-värdet kommer att röra sig uppåt.
Flytt till
Moveto-kommandot kan ses som att plocka upp en ritpenna och landa på ett annat ställe. Det finns inget linjesegment draget mellan föregående punkt och denna angivna punkt. Det är en bra idé att starta en väg med ett Moveto-kommando, eftersom utan en initierad Moveto startpunkten kommer att vara där den föregående operationen ägde rum, vilket kan leda till obestämt beteende.
Syntax:
M x,y här är x och y absoluta koordinater, som representerar horisontella respektive vertikala koordinater.
M dx, dy här är dx och dy avstånden relativt den aktuella punkten, till höger respektive nedåt.
Exempel:
Vid absolut position x=50 är y= 100:<väg d="M50,100..." />
Flytta 50 till höger, 100 ner: <väg d="m50,100..." />
Lineto
Till skillnad från Moveto-kommandot ritar Lineto-kommandot ett rakt segment. Detta raka linjesegment rör sig från nuvarande position till angiven position. Syntaxen för det inbyggda Lineto-kommandot är "L x, y" eller "l dx, dy", där x och y är absoluta koordinater, och dx och dy är avstånden till höger respektive nedåt. Det finns också bokstäverna H och V, som anger horisontella respektive vertikala rörelser. De har samma syntax som L, och deras gemener är relativ distans, medan versaler är absolut position.
Curveto
Curvto-kommandot specificerar en Bézierkurva. Det finns två typer av Bézierkurvor: kubiska och kvadratiska kurvor. En kvadratisk Bézierkurva är en speciell kubisk Bézierkurva där de två ändarna av kontrollpunkten är desamma. Syntaxen för en kvadratisk Bézierkurva är "Q cx, cy x, y" eller "q dcx, dcy dx, dy". Cx och Cy är båda absoluta koordinater för kontrollpunkter, medan DCX och DCY är avstånden till kontrollpunkter i X- respektive Y-riktningarna.
Den kubiska Bézierkurvan följer samma koncept som den kvadratiska Bézierkurvan, men den måste ta hänsyn till två kontrollpunkter. Syntaxen för den kubiska Bézierkurvan är: "C c1x, c1y c2x, c2y x, y" eller "c dc1x, dc1y dc2x, dc2y dx, dy", där c1x, c1y och c2x, c2y är de absoluta koordinaterna för kontrollpunkterna för start- respektive slutpunkten. DC1X, DC1Y och DC2X, DC2Y är relativa till startpunkten, inte till slutpunkten. DX och DY är avstånden till höger respektive nedåt.
För att koppla samman släta Bézier-kurvor kan du också använda kommandona T och S. Deras syntax är enklare än andra Curveto-kommandon eftersom den antar att den första kontrollpunkten är en spegling av den föregående kontrollpunkten på den föregående, eller att det faktiskt är den föregående punkten om det inte finns någon tidigare kontrollpunkt. Syntaxen för T är "T x,y" eller "t dx,dy", vilket motsvarar absoluta koordinater respektive relativa avstånd, och används för att skapa en kvadratisk Bézierkurva. S används för att skapa en kubisk Bézierkurva, syntaxen är "S cx, cy x, y" eller "s dcx, dcy dx, dy", där (d)cx specificerar den andra kontrollpunkten.
Slutligen kan alla Bézier-kurvkommandon skapa en flersidig Bézier-graf, initialisera kommandot först och sedan specificera alla parametrar flera gånger för att skapa en flersidig Bézier-graf. Därför kan följande två kommandon skapa exakt samma väg:
Arcto
Ibland är det enklare att beskriva en elliptisk bågkurva än en Bézierkurva. I slutändan stöder vägelementet Arcto-kommandot. Bågens centrum beräknas av andra variabler. En arcto-deklaration är relativt sett en upprepning av Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Om man dekonstruerar den, är rx och ry radierna i x- respektive y-riktningarna, och värdet på LargeArcFlag är 0 eller 1 för att avgöra om man ska rita en liten båge (0) eller en stor båge (1). SweepFlag är också antingen 0 eller 1, vilket används för att avgöra om bågen är medurs (1) eller moturs (0). x och y är koordinaterna för destinationen. Även om xAxisRotate stöder att ändra x-axelns orientering i förhållande till den aktuella referensramen, verkar denna parameter inte ha någon större effekt i Gecko 7.
ClosePath
ClosePath-kommandot kommer helt enkelt att rita en rak linje från den aktuella punkten till den första punkten i den aktuella vägen. Det är det enklaste kommandot och kommer inte med några parametrar. Den följer den kortaste linjära vägen till startpunkten, och om andra vägar följer denna väg korsar de möjliga vägarna varandra. Syntaxen är "Z" eller "z", och båda skrivmetoderna har samma funktion.
Element
Följande element kan använda attributet d:
Samma regler kan tillämpas <animate>på animationsvägar.
Påminnelse
Origo (koordinatsystemet 0,0 punkter) är ofta det övre vänstra hörnet av kontexten. Dock <glyph>är elementets ursprung i det nedre vänstra hörnet av dess brevlåda.
En komma är tillåten mellan två tal, men inte någon annanstans.
exempel
<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="ny 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
För att visa vad d="M37,17v15H14V17H37z M50,0H0v50h50V0z" faktiskt betyder, låt oss diskutera varje underpunkt i denna sträng.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Denna egenskap innehåller strängarna som utgör hela SVG:n.
M37,17
M är förkortningen för MoveTo. Den stora bokstaven "M" betyder absoluta koordinater, och den gemenera "m" betyder relativ distans. Det innebär att det baseras på startkoordinaterna, linjen är inne i lådan, och du börjar i det övre högra hörnet av rektangeln inne i lådan.
37 är förkortningen för start-svg-positionen, vid 37 pixlar på X-axeln.
17 Start-svg-position, vid 17 pixlar på y-axeln.
v15
V står för vertikal. Den stora V anger absoluta koordinater, och den lilla V anger relativ längd och avstånd. dx/dy och x/y kan användas på motsvarande positioner för H/V och h/v.
Här representeras den rita en vertikal linje på 15 pixlar i förhållande till en given koordinat. Det betyder att du ritar 15 pixlar ner till koordinaterna 37,32.
H14
H står för nivå, vilket är absoluta koordinater eftersom det är med stor bokstav.
Från slutet av v15 ritas en horisontell linje tills absolut koordinat 14 nås, och avslutas linjeteckningen när den når x-koordinat 14. Strecken är placerade vid koordinaterna 14,32.
V17
Precis som tidigare, börja från slutet av föregående rad och rita en vertikal linje tills du når y-axelns koordinat 17. Strecken är placerade vid koordinaterna 14,17.
H37
Slutligen, från 14,17, rita en horisontell linje tills du når x-axelns koordinat 37. Stroken är placerad vid koordinaterna 37,17 (värdet M)
z
Både gemener och versaler Z sluter en serie SVG-segment.
,
Ett komma startar nästa sträng av enkla vektorgrafiska segment. Nästa serie av enkla vektorlinjesegment bildar ytterboxen.
M50,0
Börja vid x-axel 50 och y-axel 0.
H0
Dra en rak linje tills (0,0).
v50
Rita en vertikal linje på 0,0 pixlar i förhållande till 50. Denna linje kommer att dras till (0,50).
H50
Rita en horisontell linje på 50 pixlar i förhållande till (0,-50). Denna linje kommer att dras till höger till (50,50).
V0
Rita en vertikal linje tills du når y-axelns koordinat 0. Detta drar en linje till (50,0), vilket är värdet av M.
z
Både gemener och versaler Z sluter en serie SVG-segment.
Bifoga koden:
Slutligen bifogas länken till dokumentet: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Publicerad på 2018-05-04 11:29:47
|
|
|
|
