Medzi SVG tvarovými tagmi je path najsilnejší a mastering path stačí na riešenie bežných problémov s kreslením.
Pozrime sa najprv na základné použitie path tagu:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Path tag definuje cestu cez vlastnosť d, ktorá definuje informácie pozostávajúce z reťazca, a cesta môže byť definovaná aj atribútmi fill a stroke na definovanie fill a border.
Informácie o atribúte d nie sú v skutočnosti zložité, pozostávajú z písmen a čísel, čísla predstavujú súradnicové body a písmená sú zodpovedné za to, ako tieto súradnicové body prepojiť. Napríklad v uvedenom príklade M predstavuje východiskový bod a L predstavuje priamku spojenia, takže informáciu o d možno interpretovať takto:
M100,100 -> začína na súradnicovom bode (100,100)
L200,200 -> Nakresliť priamku od (100,100) po (200,200).
L200,400 -> Nakresliť priamku od (200,200) po (200,400).
V atribúte d path tagu je celkovo 10 príkazov, ktoré je možné použiť, a nasledujúcich 5 príkazov je základných a relatívne jednoduchých.
M sa pohybuje na (presunúťTo) x,y počiatočných súradníc
Z blízka cesta spája začiatok a koniec cesty v priamke
L lineTo: Aktuálny uzol je pripojený priamkou k určenému uzlu (x,y)
H horizontálna priamka x udržiava y súradnicu aktuálneho bodu konštantnú a os x sa posúva k x, čím vytvára horizontálnu priamku
V vertikálna priamka y zachováva x-súradnice aktuálneho bodu nezmenené a os y sa posúva k y, čím vytvára vertikálnu čiaru
M a L
Pozrime sa na ďalší príklad M a L
<path d="M30,30 L170,30 L30,170 L170,170"></path>
Z bodu A (30, 30) sa priamka kreslí do bodu B (170, 30), potom priamo do bodu C (30, 170) a nakoniec priamo do bodu D (170, 170), a nakoniec tvorí cestu v tvare písmena Z.
Efekt vyplnenia a Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="žltá"></path>
V tomto popise cesty sú dve M, takže v jednej ceste sa objavujú dve relatívne nezávislé cesty, prvá cesta je rovnaká ako v príklade vyššie, ktorá má tvar písmena Z.
Druhá cesta je obdĺžnik s príkazom Z v popise, čo naznačuje, že spája začiatok a koniec cesty.
Okrem toho tu definujeme vlastnosť vyplnenia pre cestu a môžete vidieť, že výplň nadobudne účinok bez ohľadu na to, či je cesta uzavretá alebo nie.
H a V
Nakoniec sa pozrime na dva príkazy H a V, ktoré sú v skutočnosti skratkou príkazu L, keď os x alebo y zostáva nezmenená, takže nasledujúce dva konce sú opísané a nakreslený obrázok je rovnaký.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="žltá"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="žltá"></path>
|
Zverejnené 14. 8. 2017 13:15:15
|
|
|
