Wśród tagów kształtów SVG, ścieżka jest najpotężniejszy, a opanowanie ścieżki wystarczy, by poradzić sobie z typowymi problemami rysowania.
Przyjrzyjmy się najpierw podstawowemu zastosowaniu tagu ścieżki:
<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
Tag path definiuje ścieżkę przez właściwość d, która definiuje informacje składające się z łańcucha znaków, a ścieżkę można również zdefiniować za pomocą atrybutów fill i stroke, aby zdefiniować fill i border.
Informacja atrybutu d nie jest w rzeczywistości skomplikowana – składa się z liter i cyfr, liczby reprezentują punkty współrzędnych, a litery odpowiadają za sposób łączenia tych punktów współrzędnych. Na przykład w powyższym przykładzie M oznacza punkt początkowy, a L oznacza połączenie proste, więc informację o d można interpretować następująco:
M100,100 -> zaczyna się w punkcie współrzędnych (100,100)
L200,200 -> Narysuj prostą od (100,100) do (200,200).
L200,400 -> Narysuj prostą od (200,200) do (200,400).
W atributie d tagu ścieżki można użyć łącznie 10 poleceń, a kolejne 5 poleceń jest podstawowych i stosunkowo prostych.
M przesuwa się do (przenieśTo) współrzędnych punktu startowego x,y
Z bliska ścieżka łączy punkt początku i końca ścieżki w linii prostej
L lineTo: Bieżący węzeł jest połączony w linii prostej z określonym (x,y) węzłem
H pozioma prosta x utrzymuje współrzędną y aktualnego punktu stałą, a oś x przesuwa się do x, tworząc prostą poziomą
V pionowa prosta y zachowuje niezmienione współrzędne x aktualnego punktu, a oś y przesuwa się do y, tworząc pionową linię
M i L
Przyjrzyjmy się kolejnemu przykładowi M i L
<ścieżka d="M30,30 L170,30 L30,170 L170,170"></path>
Od punktu A (30, 30) linia prosta jest rysowana do punktu B (170, 30), następnie prosto do punktu C (30, 170), a następnie prosto do punktu D (170, 170), a na końcu tworzy ścieżkę w kształcie litery Z.
Efekt wypełnienia oraz Z
<ścieżka d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" wypełnienie="żółty"></path>
W tym opisie ścieżek są dwa M, więc na jednej ścieżce pojawiają się dwie stosunkowo niezależne ścieżki; pierwsza ścieżka jest taka sama jak w powyższym przykładzie, czyli ma kształt litery Z.
Druga ścieżka to prostokąt z poleceniem Z w opisie, co wskazuje, że łączy początek i koniec ścieżki.
Dodatkowo, tutaj definiujemy właściwość wypełnienia dla ścieżki i widać, że wypełnienie zadziała niezależnie od tego, czy ścieżka jest zamknięta, czy nie.
H i V
Na koniec przyjrzyjmy się dwóm komendom H i V, które są w rzeczywistości skrótem polecenia L, gdy oś x lub y pozostaje niezmieniona, więc opisano kolejne dwa końce, a rysunek jest taki sam.
<ścieżka d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" wypełnienie="żółty"></path>
<ścieżka d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" wypełnienie = "żółty"></path>
|
Opublikowano 14.08.2017 13:15:15
|
|
|
