Deze eigenschap definieert een pad.
gebruik
Attributen voor de definitie van categoriepaden
waarde
Variabiliteit Ja
Specificatiedocumentatie SVG 1.1 (2e editie)
De eigenschap d is eigenlijk een string die een reeks padbeschrijvingen bevat. Deze paden bestaan uit de volgende instructies:
- Verhuizing naar
- Lineto
- Curveto
- Arcto
- ClosePath
Deze worden gecombineerd in een string. Deze verschillende commando's zijn hoofdlettergevoelig; Een hoofdlettercommando geeft aan dat de parameters absolute posities zijn, terwijl kleine letters een punt ten opzichte van de huidige positie aangeven. Een negatieve waarde kan worden gespecificeerd als parameter voor het commando: de negatieve hoek zal tegen de klok in zijn, en de absolute x- en y-posities worden als negatieve coördinaten beschouwd. De negatieve relatieve x-waarde zal naar links bewegen, terwijl de negatieve relatieve y-waarde omhoog zal bewegen.
Verhuizing naar
Het Moveto-commando kan worden gezien als het oppakken van een tekenpen en ergens anders landen. Er wordt geen lijnsegment getrokken tussen het vorige punt en dit gespecificeerde punt. Het is een goed idee om een pad te starten met een Moveto-commando, want zonder een geïnitialiseerde Moveto zal het startpunt zijn waar de vorige bewerking plaatsvond, wat kan leiden tot onbepaald gedrag.
Syntaxis:
M x,y hier zijn x en y absolute coördinaten, die respectievelijk horizontale en verticale coördinaten voorstellen.
M dx, dy Hier zijn DX en dy de afstanden ten opzichte van het huidige punt, respectievelijk rechts en naar beneden.
Voorbeeld:
Op absolute positie x=50, y= 100:<pad d="M50,100..." />
Beweeg 50 naar rechts, 100 naar beneden: <pad d="m50,100..." />
Lineto
In tegenstelling tot het Moveto-commando, tekent het Lineto-commando een recht segment. Dit rechte lijnsegment beweegt van de huidige positie naar de gespecificeerde positie. De syntaxis van het native Lineto-commando is "L x, y" of "l dx, dy", waarbij x en y absolute coördinaten zijn, en dx en dy respectievelijk de afstanden naar rechts en naar beneden. Er zijn ook de letters H en V, die respectievelijk horizontale en verticale bewegingen aangeven. Ze hebben dezelfde syntaxis als L, en hun kleine letterversie is relatieve afstand, terwijl de hoofdletterversie de absolute positie is.
Curveto
Het Curvto-commando specificeert een Bézier-curve. Er zijn twee typen Bézier-krommen: kubische en kwadratische. Een kwadratische Bézier-kromme is een speciale kubische Bézier-kromme waarbij de twee uiteinden van het controlepunt gelijk zijn. De syntaxis van een kwadratische Bézier-kromme is "Q cx, cy x, y" of "q dcx, dcy dx, dy". Cx en Cy zijn beide absolute coördinaten van controlepunten, terwijl DCX en DCY respectievelijk de afstanden van controlepunten in de X- en Y-richting zijn.
De kubieke Bézier-kromme volgt hetzelfde concept als de kwadratische Bézier-kromme, maar moet twee controlepunten overwegen. De syntaxis van de kubische Bézier-kromme is: "C c1x, c1y c2x, c2y x, y" of "c dc1x, dc1y dc2x, dc2y dx, dy", waarbij c1x, c1y en c2x, c2y de absolute coördinaten zijn van de controlepunten van respectievelijk het begin- en eindpunt. DC1X, DC1Y, en DC2X, DC2Y zijn relatief ten opzichte van het beginpunt, niet van het eindpunt. DX en dy zijn respectievelijk de afstanden naar rechts en naar beneden.
Om gladde Bézier-curves te verbinden, kun je ook de T- en S-commando's gebruiken. Hun syntaxis is eenvoudiger dan die van andere Curveto-commando's omdat het ervan uitgaat dat het eerste controlepunt een weerspiegeling is van het vorige controlepunt op het vorige, of dat het daadwerkelijk het vorige punt is als er geen eerder controlepunt is. De syntaxis van T is "T x,y" of "t dx,dy", wat respectievelijk overeenkomt met absolute coördinaten en relatieve afstanden, en wordt gebruikt om een kwadratische Bézier-kromme te creëren. S wordt gebruikt om een kubische Bézier-kromme te maken, de syntaxis is "S cx, cy x, y" of "s dcx, dcy dx, dy", waarbij (d)cx het tweede controlepunt specificeert.
Ten slotte kunnen alle Bézier-curvecommando's een meerzijdige Bézier-graaf maken, het commando eerst initialiseren en vervolgens meerdere keren alle parameters specificeren om een meerzijdige Bézier-graaf te creëren. Daarom kunnen de volgende twee commando's exact hetzelfde pad creëren:
Arcto
Soms is het eenvoudiger om een elliptisch boogcurvepad te beschrijven dan een Bézier-curvepad. Uiteindelijk ondersteunt het padelement het Arcto-commando. Het middelpunt van de boog wordt berekend door andere variabelen. Een arcto-declaratie is relatief een herhaling van Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Door het te deconstrueren, zijn rx en ry respectievelijk de stralen in de x- en y-richting, en de waarde van LargeArcFlag is 0 of 1 om te bepalen of een kleine boog (0) of een grote boog (1) getekend moet worden. De SweepFlag is ook 0 of 1, wat wordt gebruikt om te bepalen of de boog met de klok mee (1) of tegen de klok in (0) is. x en y zijn de coördinaten van de bestemming. Hoewel xAxisRotate het wijzigen van de oriëntatie van de x-as ten opzichte van het huidige referentiekader ondersteunt, lijkt deze parameter weinig effect te hebben in Gecko 7.
ClosePath
Het ClosePath-commando trekt simpelweg een rechte lijn van het huidige punt naar het eerste punt in het huidige pad. Het is het eenvoudigste commando en bevat geen parameters. Het volgt het kortste lineaire pad naar het startpunt, en als andere paden op dit pad vallen, kruisen de mogelijke paden elkaar. De syntaxis is "Z" of "z", en beide schrijfmethoden hebben dezelfde functie.
Element
De volgende elementen kunnen het d-attribuut gebruiken:
Dezelfde regels kunnen worden toegepast <animate>op animatiepaden.
Herinnering
De oorsprong (coördinatensysteem 0,0 punten) is vaak de linkerbovenhoek van de context. De <glyph>oorsprong van het element bevindt zich echter in de linkerbenedenhoek van de brievenbus.
Een komma is toegestaan tussen twee nummers, maar nergens anders.
voorbeeld
<svg versie="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="nieuw 0 0 50 50" xml:space="preserve">
<pad fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Om aan te tonen wat d="M37,17v15H14V17H37z M50,0H0v50h50V0z" eigenlijk betekent, laten we elke subparagraaf van deze string bespreken.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Deze eigenschap bevat de strings waaruit de gehele SVG bestaat.
M37,17
M is de afkorting van MoveTo. De hoofdletter "M" betekent absolute coördinaten, en de kleine "m" betekent relatieve afstand. Het impliceert dat het gebaseerd is op de startcoördinaten, de lijn ligt binnen de doos, en je begint in de rechterbovenhoek van de rechthoek binnen de doos.
37 is de afkorting voor de startpositie van SVG, op 37 pixels op de X-as.
17 Start svg-positie, op 17 pixels op de y-as.
v15
V staat voor vertical. De hoofdletter V geeft absolute coördinaten aan, en de kleine V geeft de relatieve lengte en afstand aan. dx/dy en x/y kunnen worden gebruikt op de overeenkomstige posities van H/V en h/v.
Hier wordt het weergegeven door een verticale lijn van 15 pixels ten opzichte van een gegeven coördinaat te tekenen. Het betekent dat je 15 pixels tekent tot coördinaten 37,32.
H14
H staat voor niveau, wat absolute coördinaten zijn omdat het met een hoofdletter wordt geschreven.
Vanaf het einde van v15 teken je een horizontale lijn totdat absolute coördinaat 14 is bereikt, en eindig je de lijntekening wanneer x-coördinaat 14 is bereikt. De strokes bevinden zich op coördinaten 14,32.
V17
Net als voorheen, begin je bij het einde van de vorige lijn en teken je een verticale lijn totdat je bij y-as 17 bent. De strokes bevinden zich op coördinaten 14,17.
H37
Trek tenslotte vanaf 14,17 een horizontale lijn totdat je x-as coördinaat 37 bereikt. De slag bevindt zich op coördinaten 37,17 (waarde van M)
z
Zowel kleine als hoofdletters Z sluiten een reeks SVG-segmenten af.
,
Een komma begint de volgende reeks eenvoudige vectorgrafische segmenten. De volgende reeks eenvoudige vectorlijnsegmenten vormt de buitenste doos.
M50,0
Begin bij x-as 50 en y-as 0.
H0
Trek een rechte lijn tot (0,0).
v50
Teken een verticale lijn van 0,0 pixels ten opzichte van 50. Deze lijn wordt getrokken tot (0,50).
H50
Teken een horizontale lijn van 50 pixels ten opzichte van (0,-50). Deze lijn wordt naar rechts getrokken naar (50,50).
V0
Trek een verticale lijn totdat je y-as coördinaat 0 bereikt. Dit trekt een lijn naar (50,0), wat de waarde van M is.
z
Zowel kleine als hoofdletters Z sluiten een reeks SVG-segmenten af.
Voeg de code bij:
Tot slot is de link naar het document bijgevoegd: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Geplaatst op 04-05-2018 11:29:47
|
|
|
|
