Šis rekvizīts definē ceļu.
Lietošanas
Kategorijas ceļa definīcijas atribūti
vērtība
Mainīgums Jā Specifikācijas dokumentācija SVG 1.1 (2. izdevums) Rekvizīts d faktiski ir virkne, kas satur ceļu aprakstu sēriju. Šie ceļi sastāv no šādiem norādījumiem:
- Pārcelties uz
- Lineto
- Līkne
- Arkto
- Tuvceļš
Tie ir apvienoti virknē. Šīs dažādās komandas ir reģistrjutīgas; Komanda ar lielajiem burtiem norāda, ka tās parametri ir absolūtas pozīcijas, bet mazo burtu komandas norāda punktu attiecībā pret pašreizējo pozīciju. Kā komandas parametru var norādīt negatīvu vērtību: negatīvais leņķis būs pretēji pulksteņrādītāja virzienam, un absolūtās x un y pozīcijas tiks uzskatītas par negatīvām koordinātām. Negatīvā relatīvā x vērtība pārvietosies pa kreisi, bet negatīvā relatīvā y vērtība pārvietosies uz augšu.
Pārcelties uz
Komandu Moveto var uzskatīt par zīmēšanas pildspalvas paņemšanu un nolaišanos citā vietā. Starp iepriekšējo punktu un šo norādīto punktu nav novilkts līnijas segments. Ieteicams sākt ceļu ar komandu Moveto, jo bez inicializēta Moveto sākuma punkts būs iepriekšējā operācija, kas var izraisīt nenoteiktu darbību.
Sintakse:
M x,y šeit x un y ir absolūtas koordinātas, kas attiecīgi apzīmē horizontālās un vertikālās koordinātas. m dx, dy šeit dx un dy ir attālumi attiecībā pret pašreizējo punktu, attiecīgi pa labi un uz leju. Piemērs:
Absolūtajā pozīcijā x=50, y= 100:<ceļš d="M50,100..." /> Pārvietojiet 50 pa labi, 100 uz leju: <path d="m50,100..." />
Lineto
Atšķirībā no komandas Moveto, komanda Lineto uzzīmēs taisnu segmentu. Šis taisnās līnijas segments pārvietojas no pašreizējās pozīcijas uz norādīto pozīciju. Vietējās komandas Lineto sintakse ir "L x, y" vai "l dx, dy", kur x un y ir absolūtas koordinātas, un dx un dy ir attiecīgi attālumi pa labi un uz leju. Ir arī burti H un V, kas attiecīgi norāda horizontālas un vertikālas kustības. Tiem ir tāda pati sintakse kā L, un to mazā versija ir relatīvais attālums, un lielo burtu versija ir absolūta pozīcija.
Līkne
Komanda Curvto norāda Bézier līkni. Ir divu veidu Bézier līknes: kubiskā un kvadrātveida. Kvadrātiskā Bézier līkne ir īpaša kubiska Bézier līkne, kurā abi kontroles punkta gali ir vienādi. Kvadrātiskās Bézier līknes sintakse ir "Q cx, cy x, y" vai "q dcx, dcy dx, dy". Cx un Cy ir abas kontroles punktu absolūtās koordinātas, savukārt DCX un DCY ir kontroles punktu attālumi attiecīgi X un Y virzienos.
Kubiskā Bézier līkne atbilst tādai pašai koncepcijai kā kvadrātveida Bézier līknei, bet tai ir jāņem vērā divi kontroles punkti. Kubiskās Bézier līknes sintakse ir: "C c1x, c1y c2x, c2y x, y" vai "c dc1x, dc1y dc2x, dc2y dx, dy", kur c1x, c1y un c2x, c2y ir attiecīgi sākuma un beigu punktu kontroles punktu absolūtās koordinātas. DC1X, DC1Y un DC2X, DC2Y ir attiecībā pret sākuma punktu, nevis beigu punktu. dx un dy ir attiecīgi attālumi pa labi un uz leju.
Lai savienotu gludas Bézier līknes, varat izmantot arī komandas T un S. To sintakse ir vienkāršāka nekā citas Curveto komandas, jo tā pieņem, ka pirmais kontrolpunkts atspoguļo iepriekšējo kontroles punktu vai ka tas faktiski ir iepriekšējais punkts, ja nav iepriekšējā kontroles punkta. T sintakse ir "T x,y" vai "t dx,dy", kas atbilst attiecīgi absolūtajām koordinātām un relatīvajiem attālumiem, un tiek izmantota, lai izveidotu kvadrātveida Bézier līkni. S tiek izmantots, lai izveidotu kubisku Bézier līkni, sintakse ir "S cx, cy x, y" vai "s dcx, dcy dx, dy", kur (d)cx norāda otro kontroles punktu.
Visbeidzot, visas Bézier līknes komandas var izveidot daudzpusēju Bézier grafiku, vispirms inicializēt komandu un pēc tam vairākas reizes norādīt visus parametrus, lai izveidotu daudzpusēju Bézier grafiku. Tāpēc šādas divas komandas var izveidot tieši to pašu ceļu:
Arkto
Dažreiz ir vienkāršāk aprakstīt eliptisko loka līknes ceļu nekā Bézier līknes ceļu. Dienas beigās ceļa elements atbalsta komandu Arcto. Loka centru aprēķina citi mainīgie lielumi. Arcto deklarācija ir salīdzinoši nedaudz Visual Studio atkārtojums: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Dekonstruējot to, rx un ry ir rādiusi attiecīgi x un y virzienos, un LargeArcFlag vērtība ir 0 vai 1, lai noteiktu, vai zīmēt mazu loku (0) vai lielu loku (1). SweepFlag ir arī 0 vai 1, kas tiek izmantots, lai noteiktu, vai loks ir pulksteņrādītāja virzienā (1) vai pretēji pulksteņrādītāja virzienam (0). x un y ir galamērķa koordinātas. Lai gan xAxisRotate atbalsta x ass orientācijas maiņu attiecībā pret pašreizējo atskaites rāmi, šķiet, ka šim parametram nav lielas ietekmes Gecko 7.
Tuvceļš
Komanda ClosePath vienkārši novilks taisnu līniju no pašreizējā punkta līdz pirmajam punktam pašreizējā ceļā. Tā ir vienkāršākā komanda, un tai nav nekādu parametru. Tas seko īsākajam lineārajam ceļam līdz sākuma punktam, un, ja uz šī ceļa iekrīt citi ceļi, iespējamie ceļi krustojas. Sintakse ir "Z" vai "z", un abām rakstīšanas metodēm ir viena un tā pati funkcija.
Elements
Atribūtu d var izmantot šādi elementi:
Tos pašus noteikumus var piemērot <animate>animācijas ceļiem.
Atgādinājums
Izcelsme (koordinātu sistēma 0,0 punkti) bieži ir konteksta augšējais kreisais stūris. Tomēr <glyph>elementa izcelsme ir tā vēstuļu kastītes apakšējā kreisajā stūrī.
Starp jebkuriem diviem skaitļiem ir atļauts komats, bet ne nekur citur.
piemērs
<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="jauns 0 0 50 50" xml:space="preserve"> <path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/> </svg> Lai parādītu, ko patiesībā nozīmē d="M37,17v15H14V17H37z M50,0H0v50h50V0z", apspriedīsim katru šīs virknes daļu.
d =" M37,17 || V15 || H14 || V17 || H37 || z // M50,0 || H0 || 50. v. || h50 || V0 || z"
d = Šis rekvizīts satur virknes, kas veido visu SVG.
M37,17 M ir MoveTo saīsinājums. Lielais burts "M" nozīmē absolūtās koordinātas, bet mazais "m" nozīmē relatīvo attālumu. Tas nozīmē, ka tas ir balstīts uz sākuma koordinātām, līnija atrodas lodziņa iekšpusē, un jūs sākat taisnstūra augšējā labajā stūrī lodziņa iekšpusē. 37 ir sākuma svg pozīcijas saīsinājums pie 37 pikseļiem uz X ass. 17 Sākuma svg pozīcija pie 17 pikseļiem uz y ass.
15. v. V apzīmē vertikāli. Lielais burts V norāda absolūtās koordinātas, bet mazais - V norāda relatīvo garumu un attālumu. dx/dy un x/y var izmantot atbilstošajās H/V un h/v pozīcijās. Šeit tas ir attēlots, zīmējot vertikālu līniju ar 15 pikseļiem attiecībā pret konkrēto koordinātu. Tas nozīmē, ka jūs uzzīmējat 15 pikseļus līdz koordinātām 37,32.
H14 H apzīmē līmeni, kas ir absolūtas koordinātas, jo tas ir rakstīts ar lielo burtu. No v15 beigām uzzīmējiet horizontālu līniju, līdz tiek sasniegta absolūtā koordināta 14, un beidziet līnijas zīmējumu, kad tā sasniedz x koordinātu 14. Gājieni atrodas koordinātās 14,32.
V17 Tāpat kā iepriekš, sāciet no iepriekšējās līnijas beigām un uzvelciet vertikālu līniju, līdz sasniedzat y ass koordinātu 17. Gājieni atrodas koordinātās 14,17.
H37 Visbeidzot, sākot no 14,17, uzzīmējiet horizontālu līniju, līdz sasniedzat x ass koordinātu 37. Gājiens atrodas pie koordinātām 37,17 (M vērtība)
z Gan mazie, gan lielie Z burti aizver virkni SVG segmentu.
, Ar komatu sākas nākamā vienkāršo vektorgrafikas segmentu virkne. Nākamā vienkāršo vektoru līniju segmentu sērija veidos ārējo lodziņu.
M50,0 Sāciet ar x ass 50 un y ass 0.
H0 Uzzīmējiet taisnu līniju līdz (0,0).
50. v. Uzzīmē vertikālu līniju ar 0,0 pikseļiem attiecībā pret 50. Šo līniju novilks līdz (0,50).
h50 Uzzīmējiet horizontālu līniju ar 50 pikseļiem attiecībā pret (0,-50). Šī līnija tiks novilkta pa labi uz (50,50).
V0 Uzzīmējiet vertikālu līniju, līdz sasniedzat y ass koordinātu 0. Tas novilks līniju uz (50,0), kas ir M vērtība.
z Gan mazie, gan lielie Z burti aizver virkni SVG segmentu.
Pievienojiet kodu:
Visbeidzot, ir pievienota saite uz dokumentu: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|