Strona główna » Poradniki » Grafika SVG » Ścieżki

Ścieżki

Wstęp

W grafice wektorowej SVG ścieżka to podstawa podczas tworzenia niestandardowych figur jak również ruchu w animacjach. Ich idea opiera się na zapisaniu listy poleceń złożonych z nazwy polecenia i podania dodatkowych argumentów. Podczas bardziej skomplikowanych rysunków nie jest to proste, więc zaleca się używanie edytorów grafiki wektorowej. Niemniej znajomość poszczególnych poleceń może pomóc podczas dokonywanie korekty wygenerowanego kodu.

Ścieżka

Ścieżke deklaruje się w obiekcie path. Listę poleceń należy wtedy zapisać w atrybucie d. Polecenia są to pojedyncze znaki po których następują dwie liczby rozdzielone znakiem spacji. Polecenia występują w dwóch wersjach. Duży znak opisuje pozycję absolutną polecenia, a mały pozycję względną. Poniżej zostało opisane kilka podstawowych poleceń:

Pozycja początkowa

Polecenie moveto jest oznaczane przez literę "M". Polecenie to powoduje podniesienie "pisaka" z jego aktualnej pozycji i przesunięcia go do nowej wskazanej przez programistę. Każda nowa ścieżka musi się rozpoczynać od tego polecania. W przypadku wykorzystania jej poza pozycję początkową będzie oznaczać rozpoczęcie nowej ścieżki. Przykładowo zapis "M50 50" przesunie pisak na pozycję (50, 50), a zapis "m50 50" przesunie pisak o wektor (50, 50). Dokładne różnice zostaną wyjaśnione dalej.

Linia

Rysowanie linii odbywa się poprzez literę "L". Polecenie to powoduje przesunięcie pisaka na określoną opzycję z opuszczonym pisakiem co powoduje, że zostaje narysowana linia. Tak samo jak w przypadku przekładania pisaka na konkretną pozycję linię można narysować przesuwając o pewien wektor jeśli zastosuje się polecenie "l". Przykładowo w celu narysowania linii do pozycji (100, 100) należy wpisać "L100 100".

Koniec ścieżki

Polecenie zakończenia ścieżki powoduje narysowanie proste linii pomiędzy aktualną pozycją rysowania, a pozycją początkową. W tym przypadku oznaczenia "Z" i "z" niczym się nie różnią. Polecenie to nie przyjmuje dodatkowych parametrów.

Przykłady

Prosta linia

Przy pomocy poznanych poleceń spróbujmy narysować prostą linię z pozycji (5, 5) do (95, 95).

Zadeklarowana ścieżka ma następującą listę poleceń:

  1.   <path d="M5 5L95 95Z"
  2.     stroke="#000" />

Kwadrat

Trochę bardziej złożonym przypadkiem jest narysowanie kwadratu. Warto jednak zauważyć, że wystarczy narysować 3 linię, a ostatnią linię narysować poleceniem "Z".

  1.   <path d="M10 10L90 10L90 90L10 90Z"
  2.     stroke="#000" fill="green"/>

Próba przesunięcia

W obu przypadkach zostały zastosowanie polecenia pisane z wielkiej litery. Oznacza to, że wartości podane po nazwie polecenia są wartościami absolutnymi. Przypuśćmy, że tym razem kwadrat miałby rozpoczynać się w punkcie (0, 0). Zmiana wartości początkowej przy poleceniu "M" wyświetli:

  1.   <path d="M0 0L90 10L90 90L10 90Z"
  2.     stroke="#000" fill="red"/>

Jest to problem spowodowany poprzez zastosowanie wartości absolutnych. Wszystkie polecenia "L" należy teraz zastąpić liniami względnymi "l". Powoduje to lekką modyfikację w kodzie jak poniżej:

  1.   <path d="M0 0l90 0l0 90l-90 0Z"
  2.     stroke="#000" fill="blue"/>

Polecenia absolutne można mieszać razem względnymi. Przykładowo w celu narysowania linii biegnącej od pewnego punktu początkowo w prawo o 20, a potem do punktu (0, 0), a potem w prawo o 50 można zapisać następująco:

  1.   <path d="M50 50l20 0L0 0l50 0"
  2.     stroke="#000" fill="none"/>

W podanym przykładzie spróbuj zmienić pozycję początkową pisaka "M" i zaobserwuj jak zmienia się rysunek.

Inne polecenia

Przydatnymi poleceniami mogą okazać się "H" oraz "V". Pierwsze z nich rysuje poziomą kreskę pomiędzy dwoma punktami, a druga pionową kreskę pomiędzy dwoma punktami. Początkiem zaczepienie odcinka jest pozycja pisaka przed wywołanie polecenia.

Przykładowo powtórzony pierwszy przykład z linią, ale tym razem zamiast polecenia "L" zostanie wstawione "h" to otrzymamy czerwoną linię, a w przypadku zamiany na "v" to otrzymamy linię zieloną.

  1.   <path d="M5 5h95 95Z"
  2.     stroke="#F00" />
  3.   <path d="M5 5v95 95Z"
  4.     stroke="#0F0" />

Uwagi końcowe

Istnieje jeszcze wiele różnych poleceń, które zostaną opisane w drugiej części artykułu. Podstawowe polecenia miały za zadanie pokazać różnicę pomiędzy wartościami absolutnymi i względnymi oraz przedstawić sposób zapisywania ścieżki. Wykonaj zadania zamieszczone poniżej, aby utrwalić materiał.

Zadania

Zadanie 1

Narysuj, wykorzystując poznane polecenia, pomarańczowy trójkąt równoboczny o podstawie a = 100. Następnie skopiuj kod napisanej ścieżki i umieść obok identyczny, ale niebieski trójkąt. Efekt końcowy powinien być następujący:

Zadanie 2

Narysuj poniższe schodki przy pomocy poleceń "H", "V". Bok najkrótszego odcinka wynosi 25.