Ta lastnost določa pot.
navada
Kategorija Atributi definicije poti
vrednost
Variabilnost Da
Dokumentacija specifikacije SVG 1.1 (2. izdaja)
Lastnost d je pravzaprav niz, ki vsebuje vrsto opisov poti. Te poti sestavljajo naslednja navodila:
- Preseli se
- Lineto
- Curveto
- Arcto
- ClosePath
Te so združene v niz. Ti različni ukazi so občutljivi na velike in velike črke; Ukaz z velikimi črkami označuje, da so njegovi parametri absolutni položaji, medtem ko ukazi z malimi črkami označujejo točko glede na trenutni položaj. Negativno vrednost lahko določimo kot parameter za ukaz: negativen kot bo v nasprotni smeri urinega kazalca, absolutni položaji x in y pa se štejeta kot negativni koordinati. Negativna relativna vrednost x se bo premaknila levo, medtem ko se bo negativna relativna vrednost y premaknila navzgor.
Preseli se
Ukaz Moveto si lahko predstavljamo kot dvig risalnega peresa in pristanek na drugem mestu. Med prejšnjo točko in to določeno točko ni narisanega nobenega odseka črte. Dobro je začeti pot z ukazom Moveto, saj brez inicializiranega Moveto bo začetna točka tam, kjer je bila izvedena prejšnja operacija, kar lahko vodi do nedoločenega vedenja.
Sintaksa:
M, x, y, tukaj x in y sta absolutni koordinati, ki predstavljata horizontalne oziroma vertikalne koordinate.
m dx, dy tukaj dx in dy sta razdalji glede na trenutno točko, desno oziroma navzdol.
Primer:
Pri absolutni poziciji x=50, y= 100:<pot d="M50,100..." />
Premakni se 50 v desno, 100 dol: <pot d="m50,100..." />
Lineto
Za razliko od ukaza Moveto bo ukaz Lineto narisal raven segment. Ta segment ravne črte se premika iz trenutnega položaja v določen položaj. Sintaksa izvornega ukaza Lineto je "L x, y" ali "l dx, dy", kjer sta x in y absolutni koordinati, dx in dy pa razdalji desno in dol. Obstajajo tudi črki H in V, ki označujeta vodoravno oziroma vertikalno gibanje. Imajo enako sintakso kot L, njihova mala črka je relativna razdalja, velika pa absolutna pozicija.
Curveto
Ukaz Curvto določa Bézierjevo krivuljo. Obstajata dve vrsti Bézierjevih krivulj: kubične in kvadratne. Kvadratna Bézierjeva krivulja je posebna kubična Bézierjeva krivulja, kjer sta oba konca kontrolne točke enaka. Sintaksa kvadratne Bézierjeve krivulje je "Q cx, cy x, y" ali "q dcx, dcy dx, dy". Cx in Cy sta obe absolutni koordinati kontrolnih točk, medtem ko sta DCX in DCY razdalje kontrolnih točk v smeri X in Y.
Kubična Bézierjeva krivulja sledi istemu konceptu kot kvadratna Bézierjeva krivulja, vendar mora upoštevati dve kontrolni točki. Sintaksa kubične Bézierjeve krivulje je: "C c1x, c1y c2x, c2y x, y" ali "c dc1x, dc1y dc2x, dc2y dx, dy", kjer so c1x, c1y in c2x, c2y absolutne koordinate kontrolnih točk začetne in končne točke. DC1X, DC1Y in DC2X, DC2Y so relativni glede na začetno točko, ne na končno točko. DX in DY sta razdalji desno oziroma navzdol.
Za povezovanje gladkih Bézierjevih krivulj lahko uporabite tudi ukaza T in S. Njihova sintaksa je enostavnejša od drugih ukazov Curveto, ker predpostavlja, da je prva kontrolna točka odsev prejšnje kontrolne točke na prejšnji ali da je dejansko prejšnja točka, če ni prejšnje kontrolne točke. Sintaksa T je "T x,y" ali "t dx,dy", kar ustreza absolutnim koordinatam oziroma relativnim razdaljam in se uporablja za ustvarjanje kvadratne Bézierjeve krivulje. S se uporablja za ustvarjanje kubične Bézierjeve krivulje, sintaksa je "S cx, cy x, y" ali "s dcx, dcy dx, dy", kjer (d)cx določa drugo kontrolno točko.
Nazadnje lahko vsi ukazi Bézierjeve krivulje ustvarijo večstranski Bézierjev graf, najprej inicializirajo ukaz, nato pa večkrat določijo vse parametre, da ustvarijo večstranski Bézierjev graf. Zato lahko naslednji dve ukazi ustvarita popolnoma enako pot:
Arcto
Včasih je lažje opisati pot eliptične ločne krivulje kot pot Bézierjeve krivulje. Na koncu dneva element poti podpira ukaz Arcto. Središče loka se izračuna z drugimi spremenljivkami. Arcto deklaracija je v bistvu nekoliko ponavljanje Visual Studia: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Če ga razčlenimo, sta rx in ry polmeri v smeri x in y, vrednost LargeArcFlag pa je 0 ali 1, da določimo, ali narisati majhen lok (0) ali velik lok (1). SweepFlag je prav tako bodisi 0 ali 1, kar se uporablja za določanje, ali je lok v smeri urinega kazalca (1) ali v nasprotni smeri urinega kazalca (0). x in y sta koordinati cilja. Čeprav xAxisRotate podpira spreminjanje orientacije x-osi glede na trenutni referenčni okvir, se zdi, da ta parameter v Gecko 7 nima velikega učinka.
ClosePath
Ukaz ClosePath bo preprosto narisal ravno črto od trenutne točke do prve točke na trenutni poti. To je najpreprostejši ukaz in nima nobenih parametrov. Sledi najkrajši linearni poti do začetne točke, in če druge poti padejo na to pot, se možne poti sekajo. Sintaksa je "Z" ali "z" in obe metodi pisanja imata enako funkcijo.
element
Naslednji elementi lahko uporabljajo atribut d:
Enaka pravila veljajo <animate>za animacijske poti.
Opomnik
Izhodišče (koordinatni sistem 0,0 točk) je pogosto zgornji levi kot konteksta. Vendar <glyph>pa je izvor elementa v spodnjem levem kotu njegovega poštnega nabiralnika.
Vejica je dovoljena med katerima koli dvema številkama, drugje pa ne.
primer
<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>
Da pokažemo, kaj d="M37,17v15H14V17H37z M50,0H0v50h50V0z" dejansko pomeni, si poglejmo vsak pododstavek tega niza.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Ta lastnost vsebuje nize, ki sestavljajo celoten SVG.
M37,17
M je okrajšava za MoveTo. Velika črka "M" pomeni absolutne koordinate, mala črka "m" pa relativno razdaljo. To pomeni, da temelji na začetnih koordinatah, črta je znotraj okvirja, vi pa začnete v zgornjem desnem kotu pravokotnika znotraj okvirja.
37 je okrajšava za začetni položaj svg, ki je na X-osi 37 pikslov.
17 Začni svg pozicijo, pri 17 piksh na y-osi.
v15
V pomeni vertikalno. Velika črka V označuje absolutne koordinate, mala V pa relativno dolžino in razdaljo. dx/dy in x/y se lahko uporabita na ustreznih položajih H/V in h/v.
Tukaj je predstavljena z risanjem navpične črte 15 pikslov glede na dano koordinato. To pomeni, da narišeš 15 pikslov na koordinate 37,32.
H14
H pomeni nivo, kar so absolutne koordinate, ker je zapisano z veliko začetnico.
Od konca v15 nariši vodoravno črto, dokler ne dosežeš absolutne koordinate 14, in zaključi risanje črte, ko doseže x-koordinato 14. Poteze so na koordinatah 14,32.
V17
Tako kot prej, začnite na koncu prejšnje črte in narišite navpično črto, dokler ne dosežete y-osi koordinate 17. Poteze se nahajajo na koordinatah 14,17.
H37
Nazadnje, začenši z 14,17, nariši vodoravno črto, dokler ne dosežeš x-osi koordinate 37. Poteza se nahaja na koordinatah 37,17 (vrednost M)
z
Tako mala kot velika črka Z zapreta serijo SVG segmentov.
,
Vejica začne naslednji niz preprostih vektorskih grafičnih segmentov. Naslednja serija preprostih vektorskih odsekov bo tvorila zunanjo škatlo.
M50,0
Začni pri x-osi 50 in y-osi 0.
H0
Narišite ravno črto do (0,0).
v50
Narišite navpično črto 0,0 pikslov glede na 50. Ta črta bo narisana na (0,50).
H50
Narišite vodoravno črto 50 pikslov glede na (0,-50). Ta črta bo narisana desno do (50,50).
V0
Nariši navpično črto, dokler ne dosežeš y-osi koordinate 0. To bo narisalo črto do (50,0), kar je vrednost M.
z
Tako mala kot velika črka Z zapreta serijo SVG segmentov.
Priložite kodo:
Na koncu je priložena povezava do dokumenta: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Objavljeno na 4. 05. 2018 11:29:47
|
|
|
|
