Artykuł
11/18/2011

Kurs HTML5 – SVG – Ścieżki w SVG

Autor: Marcin Dembowski

Opublikowano: 2011-11-17

Za pomocą prostych kształtów nie zawsze da się uzyskać wszystkie struktury geometryczne. Lukę tą wypełniają ścieżki, które pozwalają na tworzenie bardziej skomplikowanych struktur geometrycznych, takich jak krzywe czy łuki, a także linie proste.

Przed wykonaniem zadań powinieneś wiedzieć:

czym jest SVG
jak tworzyć pliki stron HTML i pliki tekstowe w dowolnym edytorze

Po wykonaniu zadań:

zrozumiesz zasadę działania ścieżek,
nauczysz się tworzyć i analizować podstawowe typy ścieżek, wykorzystując do tego jedynie edytor tekstowy.

Implementacja

Twoim zadaniem będzie utworzenie strony HTML, która wyświetli znak drogowy, taki jak na Rys. 1.

Rys. 1. Wynik działania ćwiczenia.

Ćwiczenie składa się z dwóch części – pierwszej, dotyczącej konstrukcji tarczy znaku za pomocą ścieżki, oraz drugiej, tworzącej symbol wewnątrz tarczy.

Wprowadzenie do rysowania ścieżek konstrukcja tarczy znaku drogowego

W tej części zadania utworzysz tarcze znaku drogowego za pomocą ścieżki.

Utwórz stronę HTML.

W dowolnym edytorze, utwórz nowy dokument HTML i wpisz poniższy kod. Zbuduje on obszar wyświetlający siatkę pomocniczą, której linie oddalone są co dziesięć pikseli:

<!DOCTYPE html/>
<html>
    <head>
        <title>Ścieżki w SVG</title>
    </head>
    <body>
        <svg width="200px" height="200px">
            <pattern id="rulerPattern" patternUnits="userSpaceOnUse"
                x="0" y="0" width="10" height="10"
                viewBox="0 0 10 10" >
                <line x1="0" y1="0" x2="10" y2="0" 
                    stroke="gray" fill="none" />
                <line x1="0" y1="0" x2="0" y2="10" 
                    stroke="gray" fill="none"/>
            </pattern>
            <rect x="0" y="0" width="100%" height="100%"
                fill="url(#rulerPattern)" stroke="black" />

            <!-- ZNAK -->

        </svg>
    </body>
</html>

Zamień linię z komentarzem ZNAK za pomocą poniższego kodu:

<path d="Ścieżka do utworzenia"
        stroke="red" 
        stroke-width="8"
        fill="yellow" />
        <-- ZNAK -->

Zbuduj ścieżkę.

W celu zbudowania ścieżki, definiującej obszar tarczy, posłużysz się rysunkiem pomocniczym i siatką przedstawioną na Rys. 2. Budowę ścieżki zacznij od punktu zaznaczonego na zielono, zgodnie z ruchem wskazówek zegara.

Rys. 2. Zdjęcie pomocnicze z zarysem ścieżki tarczy.

Zamień komentarz Ścieżka do utworzenia w atrybucie d poprzez wartość definiującą początek ścieżki (M jest instrukcją nakazującą przejście do określonego punktu obrazka):

M 30 190.

Do definicji ścieżki dodaj następny fragment, wyróżniony w poniższym kodzie:

d="M 30 190 C10 190 10 190 20 170".

Informacja

W tym punkcie utworzyłeś krzywą Béziera. Krzywe tego typu definiuje się wywołując polecenie C wraz z trzema parami współrzędnych punktów (x,y). Krzywa ta składa się praktycznie z czterech punktów:

pierwszy punkt jest punktem, w którym aktualnie coś rysujemy; nie podaje się go, ponieważ brany jest z poprzedniego kroku tak, jak wyróżniony punkt w poniższym kodzie; na Rys. 2. jest to nasz punkt początkowy oznaczony kolorem zielonym:
M 30 190 C10 190 10 190 20 170,
drugi punkt, to tak zwany punkt kontrolny dla aktualnego punktu (naszego punktu początkowego); wraz z kolejnym punktem pozwala kontrolować wygięcie krzywej (punkt ten został wyróżniony w poniższym kodzie):
M 30 190 C10 190 10 190 20 170,
trzeci punkt to także punkt kontrolny, zdefiniowany dla drugiego krańca krzywej; zauważ, że w naszym przykładzie oba punkty kontrolne wskazują na to samo położenie; na Rys. 2. zostały oznaczone szarym kolorem:
M 30 190 C10 190 10 190 20 170,
czwarty punkt jest punktem, do którego krzywa będzie rysowana; punkt ten został wyróżniony w poniższym kodzie, a na Rys. 2. został oznaczony kolorem białym:
M 30 190 C10 190 10 190 20 170.

Do tworzonej ścieżki dodaj wyróżniony poniżej fragment, pozwalający na rysowanie linii prostej do określonego punktu na grafice:

d="M 30 190 C10 190 10 190 20 170 L90 30"

Kolejne dwa fragmenty ścieżki składają się z kolejnej, górnej krzywej oraz prawej krawędzi tarczy, zatem do definicji ścieżki dodaj kolejny jej fragment:

d="M 30 190 C10 190 10 190 20 170 L90 30 C100 10 100 10 110 30 L180 170"

Utwórz prawą, dolną krawędź tarczy za pomocą krzywej Béziera – spróbuj wykonać to zadanie samodzielnie, dodając do ścieżki utworzony fragment, potem porównaj swoją definicję z kodem, wyróżnionym poniżej:

d="M 30 190 C10 190 10 190 20 170 L90 30 C100 10 100 10 110 30 L180 170 C190 190 190 190 170 190"

Zamknij ścieżkę, dodając na koniec – z –komendę zamknięcia definicji ścieżki. W rezultacie cała definicja ścieżki powinna wyglądać następująco:

d="M30 190 C10 190 10 190 20 170 L90 30 C100 10 100 10 110 30 L180 170 C190 190 190 190 170 190 z"

Zapisz plik i otwórz go w przeglądarce, przeglądarka powinna wyświetlić tarczę znaku tak, jak na Rys. 3.

Rys. 3.Tarcza znaku drogowego zdefiniowana za pomocą ścieżki.

Konstrukcja symbolu wewnątrz tarczy

W poprzednim zadaniu utworzyłeś tarczę znaku drogowego, teraz musisz utworzyć symbol zakrzywionej strzałki wewnątrz tarczy, wykorzystując do tego celu jedynie krzywe.

Zamień linię z komentarzem ZNAK w pliku strony za pomocą następującego kodu:

<path d="Definicja ścieżki znaku" 
            stroke="black"
            fill="black" />

Zdefiniuj ścieżkę zakrzywionej strzałki, zamieniając wartość atrybutu d z powyższego kodu wartościami z kolejnych kroków.

Podobnie jak w poprzednim punkcie, użyj szablonu pomocniczego tak, jak na Rys. 4, wyświetlającym poszczególne krańce składowe ścieżki. Definicję ścieżki zacznij od punktu zaznaczonego na zielono, zgodnie z ruchem wskazówek zegara. Punkty kontrolne krzywej zaznaczone zostały na szaro.

Rys. 4. Punkty pomocnicze definiujące ścieżkę symbolu strzałki.

Zamień wartość d atrybutu ścieżki za pomocą poniższego kodu:

M 50 180 v-20

Informacja

Jak zauważyłeś, pojawiła się kolejna komenda tworząca ścieżkę. Mała literka v definiuje długość i kierunek linii pionowej, która ma być narysowana. W tym przypadku chcesz, aby przeglądarka narysowała linię poziomą o długości 20 punktów, kierując się w górę. Jeżeli chcesz wskazać konkretny punkt Y, do którego linia ma zostać narysowana, musisz wywołać polecenie V (duża litera v). Dla linii poziomych jest to odpowiednio h i H.

Spróbuj samodzielnie zdefiniować pozostałą ścieżkę symbolu strzałki, wykorzystując poznane w poprzednich krokach polecenia kontrolne. Dołącz zdefiniowaną ścieżkę do istniejących wartości. W rezultacie definicja całej ścieżki powinna wyglądać następująco:

d="M 50 180 v-20 C50 120 80 100 120 100 L135 110 L120 120 C90 120 70 130 70 160 v 20 L 60 170 L 50 180 z"

Zapisz plik strony i sprawdź w przeglądarce, czy otrzymałeś rezultat zgodny z obrazkiem wzorcowym Rys. 1. W przypadku problemów, sprawdź, czy źródło strony jest zgodne z przedstawionym na Rys. 5.

Rys. 5. Kod źródłowy całej strony wyświetlający znak drogowy.

Podsumowanie

W tym samouczku nauczyłeś się obsługiwać ścieżkę SVG. Poznałeś kilka podstawowych komend definiujących ścieżkę, dowiedziałeś się, czym są punkty kontrolne i do czego służą. Dzięki temu utworzyłeś złożony kształt z kilku prostych i krzywych linii.

W kolejnym samouczku nauczysz się definiować tekst w SVG.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj narysować figurę przedstawioną na rysunku Rys. 6, wykorzystując do tego celu ścieżkę, z którą zapoznałeś się w tym samouczku.

Rys. 6.

Aby zobaczyć podpowiedzi i rozwiązanie zadania przełącz na widok klasyczny.

Cała figura została utworzona przez jedną ścieżkę.
W skład ścieżki wchodzą takie metody budujące ścieżkę jak: M, C, L, z.
Rozpocznij od punktu 100, 180 rysując linię prostą do punktu 20, 80, a następnie dwa półokręgi.

<!DOCTYPE html/>
<html>
    <head>
        <title>Ścieżki w SVG – zadanie</title>
    </head>
    <body>
    <svg width="200px" height="200px">
        <path d="M 100 180 L 20 80 C20 20 100 20 100 80 C100 20 180 20 180 80 z"
        stroke="black" stroke-width="4" fill="red" />
    </svg>
    </body>
</html>