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.
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:
W przypadku, gdy nie użyje się atrybutu fill o wartości none wygenerowana zostanie nieoczekiwana figura tak jak na obrazku poniżej:
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:
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.
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:
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.
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.
