Ez a tulajdonság egy útvonalat határoz meg.
használat
Kategória út definíció attribútumok
érték
Változékonyság Igen
Specifikáció Dokumentáció SVG 1.1 (2. kiadás)
A d tulajdonság valójában egy sorozat, amely egy sor útleírást tartalmaz. Ezek az utak a következő utasításokból állnak:
- Áthelyezés
- Lineto
- Curveto
- Arcto
- ClosePath
Ezeket egy húrban egyesítik. Ezek a parancsok kis- és kis- arc-érzékenyek; A nagybetűs parancs azt jelzi, hogy paraméterei abszolút pozíciók, míg a kisbetűs parancsok pontot jelölnek az aktuális pozícióhoz képest. A parancs paramétereként negatív érték is megadható: a negatív szög az óramutató járásával ellentétes irányban történik, az abszolút x és y pozíciók pedig negatív koordinátáknak számítanak. A negatív relatív x érték balra mozdul, míg a negatív relatív y érték felfelé halad.
Áthelyezés
A Moveto parancsot úgy lehet felvenni, mint egy rajztollat felvenni és egy másik helyre érkezni. Az előző pont és a kijelölt pont között nincs vonalszakasz. Jó ötlet egy Moveto parancsgal indítani az útvonalat, mert inicializált Moveto nélkül a kezdőpont ott lesz, ahol az előző művelet történt, ami határozatlan viselkedéshez vezethet.
Szintaxis:
Az M x,y itt x és y abszolút koordináták, amelyek vízszintes és függőleges koordinátákat képviselnek.
m dx, dy itt dx és dy a jelenlegi ponthoz képest a távolságok, jobbra és lefelé, rendre a távolságok.
Példa:
Abszolút helyzetben x=50, y= 100:<út d="M50,100..." />
Mozogj 50-et jobbra, 100-at lefelé: <út d="m50,100..." />
Lineto
A Moveto parancstól eltérően a Lineto parancs egyenes szegmenset rajzol. Ez az egyenes vonal szakasz a jelenlegi pozícióból a megadott pozícióba mozog. A natív Lineto parancs szintaxisa "L x, y" vagy "l dx, dy", ahol x és y abszolút koordináták, a dx és dy pedig a jobb és lefelé lévő távolságok. Vannak még az H és V betűk is, amelyek vízszintes és függőleges mozgásokat jelölnek. Ugyanaz a szintaxis, mint az L, és a kisbetűs változatuk relatív távolság, a nagybetűs verzió pedig abszolút pozíció.
Curveto
A Curvto parancs egy Bézier-görbét jelöl meg. Kétféle Bézier-görbe létezik: köbös és kvadratikus görbe. A kvadratikus Bézier-görbe egy speciális köbös Bézier-görbe, ahol a vezérlőpont két vége ugyanaz. A négyzetes Bézier-görbe szintaxisa a "Q cx, cy x, y" vagy "q dcx, dcy dx, dy". A Cx és a Cy mindkettő abszolút koordinátái az ellenőrzőpontoknak, míg a DCX és a DCY az X és Y irányú irányítópontok távolságai.
A köbös Bézier-görbe ugyanazt a koncepciót követi, mint a kvadratikus Bézier-görbe, de két kontrollpontot kell figyelembe vennie. A köbös Bézier-görbe szintaxisa a következő: "C c1x, c1y c2x, c2y x, y" vagy "c dc1x, dc1y dc2x, dc2y dx, dy", ahol c1x, c1y és c2x, c2y a kezdő és végpont irányítópontjának abszolút koordinátái. A DC1X, DC1Y és DC2X, DC2Y a kiindulóponthoz viszonyítva vannak, nem a végponthoz. A DX és a DY a jobb és lefelé lévő távolságok, rendben.
A sima Bézier-görbék összekötéséhez használhatod a T és S parancsokat is. Szintaxisuk egyszerűbb, mint más Curveto parancsok, mert feltételezi, hogy az első vezérlőpont az előző vezérlőpont visszatükröződése az előzőn, vagy hogy valójában az előző pont, ha nincs korábbi vezérlőpont. A T szintaxisa "T x,y" vagy "t dx,dy", amely abszolút koordinátáknak és relatív távolságoknak felel meg, és egy kvadratikus Bézier-görbe létrehozására szolgál. Az S segítségével egy köbös Bézier-görbét készítenek, a szintaxis "S cx, cy x, y" vagy "s dcx, dcy dx, dy", ahol (d)cx a második vezérlőpontot jelöli.
Végül az összes Bézier-görbe parancs többoldalú Bézier-gráfot tud létrehozni, először inicializálni a parancsot, majd többször megadni az összes paramétert, hogy többoldalú Bézier-gráfot hozzon létre. Ezért a következő két parancs pontosan ugyanazt az utat hozhatja létre:
Arcto
Néha egyszerűbb egy elliptikus ívív görbe út leírása, mint egy Bézier-görbe út. A nap végén az út elem támogatja az Arcto parancsot. Az ív középpontját más változók számítják ki. Az arcto deklaráció viszonylag ismétlődik a Visual Studio-ból: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Dekonstrukció alapján az rx és a ry az x és y irányok sugarai, és a LargeArcFlag értéke 0 vagy 1, hogy meghatározzuk, hogy kis ívet (0) vagy nagy ívet (1) rajzoljanak. A SweepFlag vagy 0 vagy 1, amelyet arra használnak, hogy meghatározzák, hogy az ív az óramutató járásával megegyező irányban (1) vagy az ellentétes irányban (0). x és y a célállomás koordinátái. Bár az xAxisRotate támogatja az x-tengely orientációjának megváltoztatását a jelenlegi referencia kerethez képest, ez a paraméter nem tűnik nagy hatást nyújtónak a Gecko 7-ben.
ClosePath
A ClosePath parancs egyszerűen egyenes vonalat rajzol a jelenlegi ponttól az aktuális út első pontjáig. Ez a legegyszerűbb parancs, és nem tartalmaz semmilyen paramétert. A legrövidebb lineáris útvonalat követi a kezdőpontig, és ha más útvonalak is ezen az úton esnek, a lehetséges útvonalak kereszteznek. A szintaxis "Z" vagy "z", és mindkét írásmód ugyanazt a funkciót látja el.
elem
A következő elemek használhatják a d attribútumot:
Ugyanezek a szabályok <animate>alkalmazhatók az animációs útvonalakra is.
Emlékeztető
Az origó (koordináta-rendszer 0,0 pont) gyakran a kontextus bal felső sarka. Az <glyph>elem eredete azonban a levéldoboz bal alsó sarkában rejlik.
Vessző bármely két szám között megengedett, de máshol nem.
példa
<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="megőrzés">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Annak bemutatására, hogy valójában mit jelent d="M37,17v15H14V17H37z M50,0H0v50h50V0z", beszéljünk meg ennek a láncsornak minden albekezdését.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Ez a tulajdonság tartalmazza azokat a stringeket, amelyek az egész SVG-t alkotják.
M37,17
Az M a MoveTo rövidítése. A nagybetűs "M" abszolút koordinátákat jelent, a kisbetűs "m" pedig relatív távolságot. Ez azt jelenti, hogy a kezdőkoordinátákon alapul, a vonal a dobozban van, és a doboz tetején lévő téglalap jobb felső sarkában kezded.
A 37 a kezdő svg pozíció rövidítése, amely 37 pixelen van az X-tengelyen.
17 Indítsd az svg pozíciót, 17 pixelnél az y-tengelyen.
v15
V a függőleges jelentése. A nagybetűs V az abszolút koordinátákat, a kisbetűs V pedig a relatív hosszúságot és távolságot. a dx/dy és x/y használhatók a H/V és h/v megfelelő pozícióiban.
Itt egy adott koordinátához képest 15 pixeles függőleges vonalat rajzolnak. Ez azt jelenti, hogy 15 pixelt rajzolsz le a 37, 32-es koordinátákig.
H14
H a szintet jelenti, ami abszolút koordináták, mert nagybetűvel van írva.
A v15 végétől rajzolj egy vízszintes vonalat, amíg elérjük az abszolút koordinátát 14-et, és a vonalrajzolást akkor fejezzük be, amikor eléri az x-koordináta 14-et. A vonalak koordinátáin 14, 32 helyezkednek el.
V17
Mint korábban, kezdd az előző vonal végétől, és húzz egy függőleges vonalat, amíg el nem éred az y tengely koordinátáját a 17-et. A vonalak koordinátáin helyezkednek el a 14, 17.
H37
Végül, 14,17-től kezdve, húzz egy vízszintes vonalat, amíg el nem éred az x-tengely koordinátát 37-et. A vonal koordinátáin 37,17 (M érték) helyezkedik el
z
A kis- és nagybetűs Z betűk egy SVG szegmenssorozatot zárnak.
,
Egy vessző kezdi a következő egyszerű vektorgrafikus szegmenssorozatot. A következő egyszerű vektorvonal szegmensek alkotják a külső dobozt.
M50,0
Kezdjük az x-tengely 50-es és az y tengely 0-nál.
H0
Húzz egyenes vonalat (0,0)-ig.
v50
Rajzolj egy függőleges vonalat 0,0 pixeles 50-hez képest. Ezt a vonalat (0,50) értékre húzzuk.
h50
Rajzolj egy vízszintes vonalat 50 pixeles (0,-50) értékhez képest. Ez a vonal jobbra húzódik (50,50) irányba.
V0
Húzz egy függőleges vonalat, amíg el nem érted az y tengely koordinátátáját 0-nál. Ez egyenesként (50,0) vonalat húz, ami az M értéke.
z
A kis- és nagybetűs Z betűk egy SVG szegmenssorozatot zárnak.
Csatolja a kódot:
Végül a dokumentumhoz tartozó link a csatolt: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Közzétéve 2018. 05. 04. 11:29:47
|
|
|
|
