Az SVG alakcímkék közül az út a legerősebb, és az útvonal mestersége elegendő a gyakori rajzi problémák kezelésére.
Nézzük meg először az útjelző alapvető használatát:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Az út címke a d tulajdonságon keresztül definiálja az útvonalat, amely egy láncszálból álló információt határozza meg, és az út a fill és stroke attribútumok által is meghatározható a fill és border meghatározására.
A d attribútum információja valójában nem bonyolult, betűkből és számokból áll, a számok koordinátapontokat jelölnek, a betűk pedig felelősek ezeknek a koordinátapontoknak összekapcsolásáért. Például a fenti példában M a kezdőpontot, L pedig egyenes vonalas kapcsolatot jelöl, így d információja így értelmezhető:
M100,100 -> a (100,100) koordinátapontnál kezdődik
L200 200 -> Húzz egyenes vonalat a (100 100) és (200 200) között.
L200 400 -> Húzz egyenes vonalat a (200 200) és (200 400) között.
Az út címke d attribútumjában összesen 10 parancs használható, és a következő 5 parancs alap és viszonylag egyszerű.
M átlép (moveTo) x,y kezdőpont koordinátákra
A Z closepath egyenes vonalban köti össze az út kezdő- és végpontjait
L lineTo: Az aktuális csomópont egyenes vonalban csatlakozik a megadott (x,y) csomóponthoz
H vízszintes egyenes x állandóan tartja az aktuális pont y koordinátáját, és az x tengely x-hez mozdul, így vízszintes egyenest alkot
V függőleges egyenes y változatlanul tartja az aktuális pont x koordinátáit, és az y tengely y-re mozdul, függőleges egyenest alkotva
M és L
Nézzünk meg egy másik példát az M és L
<path d="M30,30 L170,30 L30,170 L170,170"></path>
Az A ponttól (30, 30) az egyenes vonal a B pontig (170, 30), majd egyenesen a C ponthoz (30, 170), majd egyenesen a D pontig (170, 170), végül pedig egy Z-alakú útvonalat alkot.
Kitöltési hatás, és Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="sárga"></path>
Ebben az útleírásban két M van, így az egyik útban két viszonylag független út jelenik meg, az első út ugyanaz, mint a fenti példa, amely Z-alakú.
A második út egy téglalap, amelyen a Z parancs jelenik meg a leírásban, jelezve, hogy összeköti az út elejét és végét.
Ezen felül itt definiáljuk az út töltési tulajdonságát, és láthatjuk, hogy a töltés hatni, függetlenül attól, hogy az út zárt-e vagy sem.
H és V
Végül nézzük meg a két parancsot, az H és V-t, amelyek valójában az L parancs rövidítései, amikor az x vagy y tengely változatlan marad, így a következő két véget leírjuk, és a rajzolt kép ugyanaz.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="sárga"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="sárga"></path>
|
Közzétéve 2017. 08. 14. 13:15:15
|
|
|
