Med SVG oznakami za oblike je pot najmočnejša, obvladovanje poti pa zadostuje za reševanje pogostih težav z risanjem.
Najprej si poglejmo osnovno uporabo oznake poti:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Oznaka poti definira pot skozi lastnost d, ki določa informacije, ki jih sestavlja niz, pot pa je mogoče definirati tudi z atributi fill in stroke za definiranje fill in roba.
Informacije o atributu d pravzaprav niso zapletene, sestavljene so črke in številke, številke predstavljajo koordinatne točke, črke pa predstavljajo, kako povezati te koordinatne točke. Na primer, v zgornjem primeru M predstavlja začetno točko, L pa povezavo v ravnini, zato lahko informacijo o d interpretiramo takole:
M100,100 -> se začne na koordinatni točki (100,100)
L200,200 -> Narišite ravno črto od (100,100) do (200,200).
L200,400 -> Narišite ravno črto od (200,200) do (200,400).
V atributu d oznake poti je mogoče uporabiti skupno 10 ukazov, naslednjih 5 ukazov pa je osnovnih in razmeroma preprostih.
M se premakne na (moveTo) x,y začetne koordinate
Z bližnja pot povezuje začetno in končno točko poti v ravni črti
L lineTo: Trenutno vozlišče je povezano v ravni črti z določenim (x,y) vozliščem
H vodoravna premica x ohranja y-koordinato trenutne točke konstantno, x os pa se premika proti x in tvori vodoravno premico
V navpična črta y ohranja x koordinate trenutne točke nespremenjene, os y pa se premika proti y, tvori navpično premico
M in L
Poglejmo še en primer M in L
<path d="M30,30 L170,30 L30,170 L170,170"></path>
Od točke A (30, 30) se ravna črta nariše do točke B (170, 30), nato naravnost do točke C (30, 170), nato naravnost do točke D (170, 170) in na koncu tvori pot v obliki črke Z.
Učinek polnjenja in Z
<pot d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" polnjenje = "rumeno"></path>
V tem opisu poti sta dve M, tako da se v eni poti pojavita dve relativno neodvisni poti, prva pot pa je enaka kot v zgornjem primeru, ki je v obliki črke Z.
Druga pot je pravokotnik, v opisu pa se pojavi ukaz Z, kar pomeni, da povezuje začetek in konec poti.
Poleg tega tukaj definiramo lastnost zapolnjenja za pot in lahko vidite, da zapolnitev začne veljati ne glede na to, ali je pot zaprta ali ne.
H in V
Na koncu si poglejmo dva ukaza H in V, ki sta pravzaprav okrajšavi ukaza L, kadar os x ali y ostaja nespremenjena, tako da sta opisana naslednja dva konca in je narisana slika enaka.
<pot d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" polnjenje = "rumeno"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
|
Objavljeno na 14. 08. 2017 13:15:15
|
|
|
