Strona główna » Poradniki » Grafika SVG » Złożone linie i wielokąty
 

Złożone linie i wielokąty

Wstęp

W trzeciej części kursu SVG zostaną przedstawione sposoby rysowania złożonych linii oraz figur. Do tej pory w pierwszej części został przedstawiony koncept grafiki SVG oraz rysowanie linii, a w drugiej części kilka informacji jak wstawiać prostokąty oraz elipsy. Jednak używania tylko podstawowych obiektów może powodować potrzebę pisania bardzo długiego kodu. W tym artykule zostaną przedstawię obiekty polygon oraz polyline, które pozwolą uprościć kod grafiki.

Złożona linia

Specyfikacja

Do tej pory w celu narysowania kilku linii należało użyć kilka razy obiektu line. Jednak nie zawsze jest to najlepsze rozwiązanie, ponieważ dla każdego obiektu ustalany jest ten sam styl i powtarzane są punktu rozpoczęcia / zakończenia rysowania. W celu uniknięcia takiego rysowania można użyć obiektu polyline. Pozwala ona na zdefiniowane punktów pomiędzy którymi ma być przeprowadzona linia w wybranym stylu. Obiekty polyline wymaga tylko jednego argumentu points, który będzie zawierał współrzędne wszystkich punktów. Każda współrzędna składa się z pozycji punktu XY, gdzie wartości są oddzielone przecinkiem. Z kolei punkty na liście są oddzielone spacją. Przykładowe wykorzystanie obiektu polyline wygląda następująco:

  1. <svg width="320" height="120">
  2.   <polyline points="20,100 120,100 170,20 220,100, 320,100" style="stroke:black;fill:none"/>
  3. </svg>

Wypełnienie

W przypadku, gdy nie użyje się atrybutu fill o wartości none wygenerowana zostanie nieoczekiwana figura tak jak na obrazku poniżej:

  1. <svg width="320" height="120">
  2.   <polyline points="20,100 120,100 170,20 220,100, 320,100" style="stroke:black;fill:green"/>
  3. </svg>

Warto zauważyć, że linia brzegowa została przeprowadzana między każdymi kolejnymi dwoma punktami na liście, ale nie między pierwszym, a ostatnim punktem. Jednak wypełnienie jest ograniczone przez całkowicie niewidoczną linię brzegową.

Przedstawioną metodę generowania grafiki można wykorzystać do rysowania np. takich wzorów:

  1. <svg width="200" height="200" viewBox="0 0 330 330">
  2.   <polyline points="120,120 20,120 20,220, 120,220" style="stroke:black;fill:yellow"/>
  3.   <polyline points="120,120 120,20 220,20, 220,120" style="stroke:black;fill:yellow"/>
  4.   <polyline points="220,120 320,120 320,220, 220,220" style="stroke:black;fill:yellow"/>
  5.   <polyline points="120,220 120,320 220,320, 220,220" style="stroke:black;fill:yellow"/>
  6. </svg>

Figury

Informacje wstępne

Przedstawiony wyżej obiekt polyline pozwala nawet na narysowanie kwadratu z dowolnym wypełnieniem. Należy jednak na koniec dopisać pierwszy punkt. Wtedy obramowanie będzie w pełni zamknięte.

  1. <svg width="140" height="140">
  2.   <polyline points="20,20 120,20 120,120, 20,120 20,20" style="stroke:black;fill:red"/>
  3. </svg>

Jednak do przedstawiania figur należy używać znacznika polygon. Tak samo jak w przypadku polyline należy określić argument points, który będzie zawierał wszystkie rogi wielokąta. Sposób zapisu jest taki sam jak opisany wyżej dla polyline. Zaletą znacznika polygon jest fakt, że rysuje brakując w polyline linię pomiędzy ostatnim, a pierwszym punktem:

  1. <svg width="140" height="140">
  2.   <polygon points="20,20 120,20 120,120, 20,120" style="stroke:black;fill:lightgreen"/>
  3. </svg>

Dowolna figura

Funkcja polygon pozwala narysować dowolny wielokąt wypełniony wybranym kolorem. Należy pamiętać, że dla n-wielokąta należy zadeklarować n-punktów. Funkcja polygon nie zawsze jest wygodna, ponieważ za każdym razem należy samemu wyliczyć wszystkie punkty. Problem ten może wystąpić podczas próby rysowania np. trójkąta równobocznego.

  1. <svg width="140" height="126">
  2.   <polygon points="20,106 120,106 70,20" style="stroke:black;fill:lightgreen"/>
  3. </svg>

Zadania

W celu sprawdzenie wiadomości nabytych podczas czytania artykułów postaraj się uzyskać jak najdokładniejsze kopie poniższych rysunków:

W celu sprawdzenia kodu dowolnego rysunku wystarczy zapisać obrazek np. na pulpicie i otworzyć w edytorze tekstu.

Zadanie 1

Zadanie 2