SVG <ścieżka>

Ścieżka SVG — <ścieżka>

Element <path> służy do definiowania ścieżki.

Dla danych ścieżki dostępne są następujące polecenia:

• M = przesuń do
• L = liniato
• H = linia pozioma do
• V = linia pionowato
• C = krzywa do
• S = gładka krzywa do
• Q = kwadratowa krzywa Béziera
• T = gładka kwadratowa krzywa Bézierato
• A = łuk eliptyczny
• Z = ścieżka bliska

Uwaga: Wszystkie powyższe polecenia można również wyrazić małymi literami. Wielkie litery oznaczają absolutnie pozycjonowane, małe litery oznaczają względną pozycję.

Przykład 1

Poniższy przykład definiuje ścieżkę, która zaczyna się na pozycji 150,0 z linią do pozycji 75200, a następnie z niej, linią do 225.200 i ostatecznie zamyka ścieżkę z powrotem do 150,0:

Oto kod SVG:

Przykład 2

Krzywe Béziera służą do modelowania gładkich krzywych, które można skalować w nieskończoność. Ogólnie użytkownik wybiera dwa punkty końcowe i jeden lub dwa punkty kontrolne. Krzywa Béziera z jednym punktem kontrolnym nazywana jest kwadratową krzywą Béziera, a rodzaj z dwoma punktami kontrolnymi nazywa się sześcienną.

Poniższy przykład tworzy kwadratową krzywą Béziera, gdzie A i C są punktami początkowym i końcowym, a B jest punktem kontrolnym:

Oto kod SVG:

Kompleks? TAK!!!! Ze względu na złożoność związaną z rysowaniem ścieżek, wysoce zalecane jest używanie edytora SVG do tworzenia złożonych grafik.