Ši ypatybė apibrėžia kelią.
Naudojimo
Kategorijos kelio apibrėžimo atributai
vertė
Kintamumas Taip
Specifikacijos dokumentacija SVG 1.1 (2-asis leidimas)
Ypatybė d iš tikrųjų yra eilutė, kurioje yra kelio aprašymų serija. Šiuos kelius sudaro šios instrukcijos:
- Perkeltiį
- Lineto
- Kreivė
- Arcto
- Uždaryti kelią
Jie sujungiami į eilutę. Šios skirtingos komandos skiria didžiąsias ir mažąsias raides; Didžiosios raidės komanda rodo, kad jos parametrai yra absoliučios pozicijos, o mažosios komandos nurodo tašką, palyginti su dabartine padėtimi. Kaip komandos parametrą galima nurodyti neigiamą vertę: neigiamas kampas bus prieš laikrodžio rodyklę, o absoliučios x ir y pozicijos bus laikomos neigiamomis koordinatėmis. Neigiama santykinė x reikšmė pasislinks į kairę, o neigiama santykinė y reikšmė pasislinks aukštyn.
Perkeltiį
Komanda "Moveto" gali būti laikoma piešimo rašiklio paėmimu ir nusileidimu kitoje vietoje. Tarp ankstesnio taško ir šio nurodyto taško nėra nubrėžtos linijos atkarpos. Patartina pradėti kelią su komanda Moveto, nes be inicijuoto Moveto pradžios taškas bus ten, kur įvyko ankstesnė operacija, o tai gali sukelti neapibrėžtą elgesį.
Sintaksė:
M x,y čia x ir y yra absoliučios koordinatės, atitinkamai horizontalios ir vertikalios koordinatės.
m dx, dy čia dx ir dy yra atstumai, palyginti su dabartiniu tašku, atitinkamai į dešinę ir žemyn.
Pavyzdys:
Esant absoliučiai padėčiai x=50, y= 100:<path d="M50,100..." />
Perkelkite 50 į dešinę, 100 žemyn: <path d="m50,100..." />
Lineto
Skirtingai nuo komandos Moveto, komanda Lineto nubrėžs tiesų segmentą. Šis tiesios linijos segmentas juda iš dabartinės padėties į nurodytą padėtį. Gimtosios Lineto komandos sintaksė yra "L x, y" arba "l dx, dy", kur x ir y yra absoliučios koordinatės, o dx ir dy yra atstumai atitinkamai į dešinę ir žemyn. Taip pat yra raidės H ir V, kurios atitinkamai nurodo horizontalius ir vertikalius judesius. Jų sintaksė yra tokia pati kaip L, o mažosios raidės yra santykinis atstumas, o didžiosios – absoliuti padėtis.
Kreivė
Komanda Curvto nurodo Bézier kreivę. Yra dviejų tipų Bézier kreivės: kubinės ir kvadratinės. Kvadratinė Bézier kreivė yra speciali kubinė Bézier kreivė, kurioje abu kontrolinio taško galai yra vienodi. Kvadratinės Bézier kreivės sintaksė yra "Q cx, cy x, y" arba "q dcx, dcy dx, dy". Cx ir Cy yra absoliučios valdymo taškų koordinatės, o DCX ir DCY yra valdymo taškų atstumai atitinkamai X ir Y kryptimis.
Kubinė Bézier kreivė atitinka tą pačią koncepciją kaip ir kvadratinė Bézier kreivė, tačiau ji turi atsižvelgti į du kontrolinius taškus. Kubinės Bézier kreivės sintaksė yra: "C c1x, c1y c2x, c2y x, y" arba "c dc1x, dc1y dc2x, dc2y dx, dy", kur c1x, c1y ir c2x, c2y yra atitinkamai absoliučios pradžios ir pabaigos taškų valdymo taškų koordinatės. DC1X, DC1Y ir DC2X, DC2Y yra susiję su pradiniu tašku, o ne su galutiniu tašku. dx ir dy yra atstumai atitinkamai į dešinę ir žemyn.
Norėdami sujungti lygias Bézier kreives, taip pat galite naudoti komandas T ir S. Jų sintaksė yra paprastesnė nei kitų "Curveto" komandų, nes daroma prielaida, kad pirmasis valdymo taškas yra ankstesnio valdymo taško atspindys ankstesniame arba kad jis iš tikrųjų yra ankstesnis taškas, jei nėra ankstesnio valdymo taško. T sintaksė yra "T x,y" arba "t dx,dy", kuri atitinkamai atitinka absoliučias koordinates ir santykinius atstumus ir naudojama kvadratinei Bézier kreivei sukurti. S naudojamas kubinei Bézier kreivei sukurti, sintaksė yra "S cx, cy x, y" arba "s dcx, dcy dx, dy", kur (d)cx nurodo antrąjį kontrolinį tašką.
Galiausiai, visos Bézier kreivės komandos gali sukurti daugiapusį Bézier grafiką, pirmiausia inicijuoti komandą, o tada kelis kartus nurodyti visus parametrus, kad būtų sukurtas daugiapusis Bézier grafikas. Todėl šios dvi komandos gali sukurti tą patį kelią:
Arcto
Kartais paprasčiau apibūdinti elipsės lanko kreivės kelią nei Bézier kreivės kelią. Dienos pabaigoje kelio elementas palaiko Arcto komandą. Lanko centras apskaičiuojamas pagal kitus kintamuosius. Arcto deklaracija yra santykinai šiek tiek pakartojimas Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Jį dekonstruojant, rx ir ry yra spindulys atitinkamai x ir y kryptimis, o LargeArcFlag reikšmė yra 0 arba 1, kad būtų galima nustatyti, ar nubrėžti mažą lanką (0), ar didelį lanką (1). SweepFlag taip pat yra 0 arba 1, kuris naudojamas nustatyti, ar lankas yra pagal laikrodžio rodyklę (1), ar prieš laikrodžio rodyklę (0). x ir y yra paskirties vietos koordinatės. Nors xAxisRotate palaiko x ašies orientacijos keitimą dabartinio atskaitos rėmo atžvilgiu, atrodo, kad šis parametras neturi didelės įtakos Gecko 7.
Uždaryti kelią
Komanda "ClosePath" tiesiog nubrėžs tiesią liniją nuo dabartinio taško iki pirmojo dabartinio kelio taško. Tai paprasčiausia komanda ir neturi jokių parametrų. Jis eina trumpiausiu linijiniu keliu iki pradinio taško, o jei kiti keliai patenka į šį kelią, galimi keliai susikerta. Sintaksė yra "Z" arba "z", ir abu rašymo būdai turi tą pačią funkciją.
elementas
Šie elementai gali naudoti d atributą:
Tos pačios taisyklės gali būti taikomos <animate>animacijos keliams.
Priminimas
Kilmė (koordinačių sistema 0,0 balo) dažnai yra viršutinis kairysis konteksto kampas. Tačiau <glyph>elemento kilmė yra apatiniame kairiajame jo pašto dėžutės kampe.
Kablelis leidžiamas tarp bet kurių dviejų skaičių, bet ne niekur kitur.
pavyzdys
<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="naujas 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Norėdami parodyti, ką iš tikrųjų reiškia d="M37,17v15H14V17H37z M50,0H0v50h50V0z", aptarkime kiekvieną šios eilutės pastraipą.
d =" M37,17 || V15 || H14 || V17 || H37 || z // M50,0 || H0 || V50 || H50 || V0 || z"
d =
Šioje ypatybėje yra eilutės, sudarančios visą SVG.
M37,17
M yra MoveTo santrumpa. Didžioji raidė "M" reiškia absoliučias koordinates, o mažoji "m" reiškia santykinį atstumą. Tai reiškia, kad jis pagrįstas pradžios koordinatėmis, linija yra dėžutės viduje, o jūs pradedate viršutiniame dešiniajame stačiakampio kampe dėžutės viduje.
37 yra pradinės svg padėties santrumpa, esanti 37 pikseliai X ašyje.
17 Pradžios svg padėtis, esant 17 pikselių y ašyje.
v15
V reiškia vertikalią. Didžioji raidė V rodo absoliučias koordinates, o mažoji - V - santykinį ilgį ir atstumą. dx/dy ir x/y gali būti naudojami atitinkamose H/V ir h/v padėtyse.
Čia jis vaizduojamas nubrėžiant vertikalią 15 pikselių liniją, palyginti su nurodyta koordinate. Tai reiškia, kad nubrėžiate 15 pikselių iki koordinačių 37,32.
H14
H reiškia lygį, kuris yra absoliučios koordinatės, nes jis rašomas didžiosiomis raidėmis.
Nuo v15 pabaigos nubrėžkite horizontalią liniją, kol bus pasiekta absoliuti koordinatė 14, ir užbaikite linijos brėžinį, kai ji pasieks x koordinatę 14. Brūkšniai yra koordinatėse 14,32.
V17
Kaip ir anksčiau, pradėkite nuo ankstesnės eilutės pabaigos ir nubrėžkite vertikalią liniją, kol pasieksite y ašies koordinatę 17. Brūkšniai yra koordinatėse 14,17.
H37
Galiausiai, pradedant nuo 14,17, nubrėžkite horizontalią liniją, kol pasieksite x ašies koordinatę 37. Smūgis yra ties koordinatėmis 37,17 (M reikšmė)
z
Tiek mažosios, tiek didžiosios raidės Z uždaro SVG segmentų seriją.
,
Kablelis pradeda kitą paprastų vektorinių grafinių segmentų eilutę. Kita paprastų vektorinių linijų segmentų serija padarys išorinę dėžutę.
M50,0
Pradėkite nuo x ašies 50 ir y ašies 0.
H0
Nubrėžkite tiesią liniją iki (0,0).
v50
Nubrėžkite vertikalią 0,0 pikselio liniją, palyginti su 50. Ši linija bus nubrėžta iki (0,50).
H50
Nubrėžkite horizontalią 50 pikselių liniją (0,-50) atžvilgiu. Ši linija bus nubrėžta į dešinę iki (50,50).
V0
Nubrėžkite vertikalią liniją, kol pasieksite y ašies koordinatę 0. Tai nubrėžs liniją iki (50,0), kuri yra M vertė.
z
Tiek mažosios, tiek didžiosios raidės Z uždaro SVG segmentų seriją.
Pridėkite kodą:
Galiausiai pridedama nuoroda į dokumentą: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Paskelbta 2018-05-04 11:29:47
|
|
|
|
