Táto vlastnosť definuje cestu.
použitie
Kategória Definícia atribútov ciest
hodnota
Variabilita Áno
Dokumentácia špecifikácie SVG 1.1 (2. edícia)
Vlastnosť d je v skutočnosti reťazec, ktorý obsahuje sériu popisov ciest. Tieto cesty pozostávajú z nasledujúcich inštrukcií:
- Presunúť sa
- Lineto
- Curveto
- Arcto
- ClosePath
Tieto sú spojené do reťazca. Tieto rôzne príkazy rozlišujú veľkosť písmen; Príkaz veľkým písmenom označuje, že jeho parametre sú absolútne polohy, zatiaľ čo príkazy malými písmenami označujú bod vzhľadom na aktuálnu pozíciu. Záporná hodnota môže byť určená ako parameter pre príkaz: záporný uhol bude proti smeru hodinových ručičiek a absolútne polohy x a y budú považované za záporné súradnice. Záporná relatívna hodnota x sa posunie doľava, zatiaľ čo záporná relatívna hodnota y sa posunie nahor.
Presunúť sa
Príkaz Moveto možno chápať ako zdvihnutie kresliacej pera a pristátie na inom mieste. Medzi predchádzajúcim bodom a týmto špecifikovaným bodom nie je nakreslený žiadny úsek. Je dobré začať cestu príkazom Moveto, pretože bez inicializovaného Moveto bude východiskový bod tam, kde prebehla predchádzajúca operácia, čo môže viesť k neurčitému správaniu.
Syntax:
M, x, y, tu x a y sú absolútne súradnice, ktoré predstavujú horizontálne a vertikálne súradnice.
m dx, dy tu dx a dy sú vzdialenosti vzhľadom na aktuálny bod, doprava a dole.
Príklad:
Pri absolútnej polohe x=50, y= 100:<path d="M50,100..." />
Posuň sa o 50 doprava, 100 dole: <path d="m50,100..." />
Lineto
Na rozdiel od príkazu Moveto, príkaz Lineto nakreslí priamy úsek. Táto priamka sa pohybuje z aktuálnej polohy do určenej polohy. Syntax natívneho príkazu Lineto je "L x, y" alebo "l dx, dy", kde x a y sú absolútne súradnice a dx a dy sú vzdialenosti doprava a dole. Sú tu aj písmená H a V, ktoré označujú horizontálny a vertikálny pohyb. Majú rovnakú syntax ako L, ich malá verzia je relatívna vzdialenosť a veľké písmená absolútna pozícia.
Curveto
Príkaz Curvto špecifikuje Bézierovu krivku. Existujú dva typy Bézierových kriviek: kubické a kvadratické. Kvadratická Bézierova krivka je špeciálna kubická Bézierova krivka, kde sú oba konce riadiaceho bodu rovnaké. Syntax kvadratickej Bézierovej krivky je "Q cx, cy x, y" alebo "q dcx, dcy dx, dy". Cx a Cy sú obe absolútne súradnice riadiacich bodov, zatiaľ čo DCX a DCY sú vzdialenosti riadiacich bodov v smere X a Y.
Kubická Bézierova krivka nasleduje rovnaký koncept ako kvadratická Bézierova krivka, ale musí zohľadniť dva riadiace body. Syntax kubickej Bézierovej krivky je: "C c1x, c1y c2x, c2y x, y" alebo "c dc1x, dc1y dc2x, dc2y dx, dy", kde c1x, c1y a c2x, c2y sú absolútne súradnice riadiacich bodov začiatku a koncového bodu. DC1X, DC1Y a DC2X, DC2Y sú relatívne k východiskovému bodu, nie k koncovému bodu. DX a DY sú vzdialenosti doprava a dole.
Na prepojenie hladkých Bézierových kriviek môžete použiť aj príkazy T a S. Ich syntax je jednoduchšia ako iné príkazy Curveto, pretože predpokladá, že prvý kontrolný bod odráža predchádzajúci kontrolný bod na predchádzajúcom alebo že je to vlastne predchádzajúci bod, ak žiadny predchádzajúci kontrolný bod neexistuje. Syntax T je "T x,y" alebo "t dx,dy", čo zodpovedá absolútnym súradniciam a relatívnym vzdialenostiam, a používa sa na vytvorenie kvadratickej Bézierovej krivky. S sa používa na vytvorenie kubickej Bézierovej krivky, syntax je "S cx, cy x, y" alebo "s dcx, dcy dx, dy", kde (d)cx určuje druhý kontrolný bod.
Nakoniec všetky príkazy Bézierovej krivky môžu vytvoriť viacstranný Bézierov graf, najprv inicializovať príkaz a potom viackrát zadať všetky parametre, čím vznikne viacstranný Bézierov graf. Preto nasledujúce dva príkazy môžu vytvoriť presne tú istú cestu:
Arcto
Niekedy je jednoduchšie opísať cestu eliptickej oblúkovej krivky než dráhu Bézierovej krivky. Na konci dňa prvok path podporuje príkaz Arcto. Stred oblúka sa vypočíta pomocou ďalších premenných. Arcto deklarácia je relatívne trochu opakovanie Visual Studia: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Pri jeho rozklade sú rx a ry polomery v smere x a y, a hodnota LargeArcFlag je 0 alebo 1 na určenie, či nakresliť malý oblúk (0) alebo veľký oblúk (1). SweepFlag je tiež buď 0 alebo 1, čo sa používa na určenie, či je oblúk v smere hodinových ručičiek (1) alebo proti smeru hodinových ručičiek (0). x a y sú súradnice cieľa. Hoci xAxisRotate podporuje zmenu orientácie osi x vzhľadom na aktuálny referenčný rámec, tento parameter sa v Gecko 7 nezdá mať veľký vplyv.
ClosePath
Príkaz ClosePath jednoducho nakreslí priamku z aktuálneho bodu do prvého bodu na aktuálnej ceste. Je to najjednoduchší príkaz a neobsahuje žiadne parametre. Sleduje najkratšiu lineárnu cestu k východiskovému bodu a ak na túto cestu padajú ďalšie cesty, možné cesty sa pretínajú. Syntax je "Z" alebo "z" a obe metódy písania majú rovnakú funkciu.
Prvok
Nasledujúce prvky môžu používať atribút d:
Rovnaké pravidlá sa dajú aplikovať <animate>aj na animačné cesty.
Pripomienka
Počiatok (súradnicový systém 0,0 bodov) je často v ľavom hornom rohu kontextu. <glyph>Pôvod prvku je však v ľavom dolnom rohu jeho poštovej schránky.
Čiarka je povolená medzi dvoma číslami, ale nikde inde nie.
príklad
<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">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Aby sme ukázali, čo d="M37,17v15H14V17H37z M50,0H0v50h50V0z" vlastne znamená, poďme si rozobrať každý pododsek tohto reťazca.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Táto vlastnosť obsahuje reťazce, ktoré tvoria celé SVG.
M37,17
M je skratka pre MoveTo. Veľké "M" znamená absolútne súradnice a malé "m" relatívnu vzdialenosť. Naznačuje to, že je to založené na počiatočných súradniciach, čiara je vo vnútri krabice a začínate v pravom hornom rohu obdĺžnika vo vnútri políčka.
37 je skratka pre počiatočnú pozíciu svg, ktorá má 37 pixelov na osi X.
17 Začnite svg pozíciu, na 17 pixeloch na osi y.
v15
V znamená vertikálne. Veľké V označuje absolútne súradnice a malé V relatívnu dĺžku a vzdialenosť. dx/dy a x/y môžu byť použité na príslušných pozíciách H/V a h/v.
Tu je znázornená ako zvislá čiara s veľkosťou 15 pixelov vzhľadom na danú súradnicu. Znamená to, že nakreslíte 15 pixelov na súradnice 37,32.
H14
H znamená rovina, čo sú absolútne súradnice, pretože sa píše s veľkým písmenom.
Od konca v15 nakreslite horizontálnu čiaru až do dosiahnutia absolútnej súradnice 14 a ukončite kreslenie, keď dosiahne x-súradnicu 14. Zábery sa nachádzajú na súradniciach 14,32.
V17
Rovnako ako predtým, začnite od konca predchádzajúcej čiary a kreslite vertikálnu čiaru, kým nedosiahnete y-osovú súradnicu 17. Ťahy sa nachádzajú na súradniciach 14,17.
H37
Nakoniec, začínajúc od 14,17, nakresli vodorovnú čiaru, až kým nedosiahneš x-osovú súradnicu 37. Ťah sa nachádza na súradniciach 37,17 (hodnota M)
z
Malé aj veľké Z uzatvárajú sériu SVG segmentov.
,
Čiarka začína ďalší reťazec jednoduchých segmentov vektorovej grafiky. Ďalšia séria jednoduchých vektorových úsečiek vytvorí vonkajšiu krabicu.
M50,0
Začni na osi x 50 a osi y 0.
H0
Nakresliť priamku až do (0,0).
V50
Nakreslite vertikálnu čiaru 0,0 pixelov vzhľadom na 50. Táto čiara bude nakreslená na (0,50).
H50
Nakreslite horizontálnu čiaru s 50 pixelmi vzhľadom na (0,-50). Táto čiara bude nakreslená doprava na (50,50).
V0
Nakresli zvislú čiaru, kým nedosiahneš y-osovú súradnicu 0. Tým sa nakreslí čiara na (50,0), čo je hodnota M.
z
Malé aj veľké Z uzatvárajú sériu SVG segmentov.
Priložite kód:
Nakoniec je pripojený odkaz na dokument: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Zverejnené 4. 5. 2018 11:29:47
|
|
|
|
