Wyznaczanie skomplikowanej konstrukcyjnie ścieżki jest łatwe, gdy posługujemy się programem do grafiki wektorowej, natomiast może być trudne, gdy zechcemy tworzyć elementy rysunku ręcznie, ingerując bezpośrednio w kod.
Odcinki
Najłatwiej jest zacząć od odcinków, gdyż są one intuicyjnie najprostsze do pojęcia.
| Polecenie | Parametry | Nazwa | Opis |
| M | x,y | moveto | Mx,y (lub Mx y) oznacza ustawienie pióra do rysowania w danym punkcie obszaru, na którym rysujemy (kanwy) - wyznaczamy tu absolutne położenie punktu (współrzędne absolutne). Przykład: M20,20 |
| m | x,y | moveto | mx,y (lub mx y) oznacza przesunięcie pióra do rysowania o x,y pikseli w stosunku do aktualnego położenia - określamy relatywną zmianę położenia. Przykład: m20,20. |
| H | x | horizontal lineto | Hx to polecenie rysowania poziomej linii od aktualnej pozycji pióra do punktu o współrzędnej x. Przykład: H140 oznacza, że zostanie narysowana linia od bieżącego punktu do punktu o współrzędnej x=140. |
| h | x | horizontal lineto | hx to polecenie rysowania od aktualnej pozycji pióra poziomej linii o długości x pikseli. Przykład: h120 oznacza, że od bieżącego punktu zostanie namalowana pozioma linia o długości x=120 pikseli. Uwaga: liczby mogą być ujemne, np. h-120, co spowoduje narysowanie odcinka w przeciwnym kierunku niż domyślny (w lewo). |
| V | y | vertical lineto | Vy to polecenie rysowania pionowej linii od aktualnej pozycji pióra do punktu o współrzędnej y. Przykład: V110 oznacza, że zostanie narysowana pionowa linia od bieżącego punktu do punktu o współrzędnej y=110. |
| v | y | vertical lineto | vy to polecenie rysowania od aktualnej pozycji pióra pionowej linii o długości y pikseli. Przykład: v90 oznacza, że od bieżącego punktu zostanie narysowana pionowa linia o długości y=90 pikseli. |
| L | x,y | lineto | Lx,y (lub Lx y) to polecenie narysowania linii od bieżącego punktu do punktu o absolutnych współrzędnych x,y. Przykład: L120,90 spowoduje wykreślenie odcinka od bieżącego punktu do punktu o współrzędnych 120,90. |
| l | x,y | lineto | lx,y (lub lx y) to polecenie narysowania od danego punktu linii o składowych x,y. Przykład: l100,70 spowoduje wykreślenie linii o składowych x=100 i y=70. |
Poniższy rysunek ilustruje sytuacje zaprezentowane w tabeli. Na początku ustawiamy pióro w punkcie (20,20), a potem rysujemy od tego punktu różne odcinki, posługując się wartościami absolutnymi lub względnymi. Współrzędne zaczynają się oczywiście w lewym górnym rogu, od wartości 0,0.
Przykład:
<path d="M20,20 H100 V50 h-50 v50 L120,150" style="fill:none;stroke:red;stroke-width:3"/>
Procedura rysowania, krok po kroku.
- Na obszarze rysowania najpierw wykonany został skok do punktu o absolutnych współrzędnych 20,20 (M20,20).
- W kolejnym kroku został narysowany (H100) poziomy odcinek aż do punktu o współrzędnej x=100.
- Następny etap to narysowanie (V50) pionowego odcinka do punktu o współrzędnej y=50.
- W następnym kroku (h-50) został wykreślony w lewo poziomy odcinek o długości 50 pikseli.
- Kolejny krok to wykreślenie (v50) pionowego odcinka o długości 50 pikseli.
- Ostatni etap to narysowanie (L120,150) odcinka od bieżącego pozycji pióra do punktu o współrzędnych absolutnych 120,150.
Jak widzimy w stylach, figura nie ma żadnego wypełnienia (fill:none), czerwony kolor kreski (stroke:red) i grubość kreski 3 piksele (stroke-width:3).
Łuki
Łuki są wycinane z okręgów i elips. Łuk definiowany jest za pomocą następującego polecenia:
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- rx i ry oznaczają odpowiednio długość promienia x i promienia y elipsy, z której wycinamy łuk.
- x-axis-rotation to obrót osi x elipsy mierzony w stopniach, w przedziale od -180 do 180 stopni.
- large-arc-flag oznacza, że albo wyświetlany jest większy (1) albo mniejszy (0) łuk wycięty z elipsy.
- sweep-flag oznacza, że albo łuk jest wyświetlany powyżej lub na prawo od ścieżki (1), albo też poniżej lub na lewo (0).
- x y oznaczają współrzędne na ścieżce, gdzie kończy się wyświetlanie łuku.
Aby zrozumieć, jak to w praktyce działa, musimy pokazać to na przykładach.
Dla ułatwienia obejmiemy obszar rysowania obramowaniem, stosując po prostu styl CSS postaci style="border:solid 1px black". Polecenie M10 150 oznacza przeniesienie pióra do punktu 10,150. Z kolei L60 150 oznacza wykreślenie prostej do punktu 60,150. W tym miejscu zaczyna się wykreślanie łuku A, zaś konstrukcję kończymy wykreśleniem odcinka L. W ten sposób zobaczymy zachowanie łuku zależnie od wartości parametrów.
<svg width="400px" height="300px" style="border:solid 1px black" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M10 150 L 60 150 A 80 50 0 1 1 150 150 L 400 150" stroke="black" fill="khaki" stroke-width="2" fill-opacity="0.4"/> </svg>
Jak widzimy, większy łuk został wycięty z elipsy o promieniach 80 i 50 i wyświetlony nad ścieżką.
Zmienimy teraz polecenie z A 80 50 0 1 1 150 150 na A 50 80 0 1 1 150 150, a więc elipsa zostanie "postawiona" pionowo.
Tę ostatnią figurę przechylimy teraz najpierw o 30 stopni w prawo, a potem o 100 stopni w prawo, podając definicję A 50 80 30 1 1 150 150, a potem A 50 80 100 1 1 150 150
Kolejna zmiana w stosunku do pierwszego rysunku łuku to wyświetlenie mniejszego łuku wyciętego z elipsy (na pierwszym wykreślony został większy). Zmienimy polecenie z A 80 50 0 1 1 150 150 na A 80 50 0 0 1 150 150.
Następna zmiana w stosunku do pierwszego rysunku łuku to wyświetlenie dużego łuku wyciętego z elipsy nie powyżej (jak na pierwszym), ale poniżej ścieżki. Polecenie A 80 50 0 1 1 150 150 zmienimy na A 80 50 0 1 0 150 150
I wreszcie dochodzimy do ostatniego elementu, czyli punktu, w którym jest ciąg dalszy ścieżki. Jak widać, ta sama elipsa jest inaczej "wcięta" w ścieżkę i zajmuje w niej nie 90, lecz 140 pikseli. Jest w nią bardziej "wtopiona". To skutek zmiany polecenia z A 80 50 0 1 1 150 150 na A 80 50 0 1 1 200 150
c.d.n.
