Mezi SVG tagy tvarů je nejsilnější cesta a ovládnutí cesty stačí k řešení běžných problémů s kreslením.
Podívejme se nejprve na základní využití path tagu:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Path tag definuje cestu přes vlastnost d, která definuje informace složené z řetězce, a cestu lze také definovat pomocí atributů fill a stroke pro definování fill a border.
Informace o atributu d není ve skutečnosti složitá, skládá se z písmen a čísel, čísla představují souřadnicové body a písmena jsou zodpovědná za to, jak tyto souřadnicové body spojit. Například v uvedeném příkladu M představuje výchozí bod a L představuje přímé spojení, takže informace d lze interpretovat takto:
M100,100 -> začíná na souřadnicovém bodě (100,100)
L200,200 -> Nakreslit přímku od (100,100) do (200,200).
L200,400 -> Nakreslit přímku od (200,200) do (200,400).
V atributu d path tagu lze použít celkem 10 příkazů a následujících 5 příkazů je základních a relativně jednoduchých.
M se pohybuje na (přesunuTo) x,y souřadnice počátečního bodu
Z blízká cesta spojuje začátek a konec cesty v přímce
L lineTo: Aktuální uzel je spojen přímkou s určeným uzlem (x,y)
H vodorovná přímka x udržuje souřadnici y aktuálního bodu konstantní a osa x se pohybuje směrem x a tvoří vodorovnou přímku
V svislá čára y udržuje souřadnice x aktuálního bodu beze změny a osa y se pohybuje k y, čímž vzniká svislá čára
M a L
Podívejme se na další příklad M a L
<path d="M30,30 L170,30 L30,170 L170,170"></path>
Od bodu A (30, 30) je přímka nakreslena do bodu B (170, 30), poté přímo do bodu C (30, 170) a nakonec přímo do bodu D (170, 170), a nakonec tvoří cestu ve tvaru písmene Z.
Efekt vyplnění a Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
V tomto popisu cesty jsou dvě M, takže v jedné cestě se objevují dvě relativně nezávislé cesty, první cesta je stejná jako v příkladu výše, která má tvar písmene Z.
Druhá cesta je obdélník s příkazem Z v popisu, což naznačuje, že spojuje začátek a konec cesty.
Navíc zde definujeme vlastnost vyplnění pro cestu a můžete vidět, že vyplnění nanese účinnost bez ohledu na to, zda je cesta uzavřená nebo ne.
H a V
Nakonec se podívejme na dva příkazy H a V, které jsou ve skutečnosti zkratkou příkazu L, když osa x nebo y zůstává nezměněna, takže následující dva konce jsou popsány a nakreslený obrázek je stejný.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="yellow"></path>
|
Zveřejněno 14.08.2017 13:15:15
|
|
|
