Artykuł
11/17/2011

Kurs HTML5 – SVG – Podstawowe kształty

Autor: Marcin Dembowski

Opublikowano: 2011-11-16

Podstawowe kształty SVG można wykorzystywać do tworzenia wielu bardziej złożonych struktur, schematów i oznaczeń. Warto wiedzieć, w jaki sposób kształty te można łączyć i na jakiej zasadzie one działają. – wiedza ta jest przydatna na przykład przy modyfikowaniu obiektów za pomocą JavaScript.

Przed wykonaniem zadań powinieneś wiedzieć:

Czym jest SVG
Jak tworzyć pliki stron HTML i pliki tekstowe w dowolnym edytorze
Jak osadzać SVG na stronach

Po wykonaniu zadań:

zrozumiesz zasadę tworzenia wielokątów, okręgów i prostokątów,
dowiesz się, jak zaokrąglać prostokąt,
dowiesz się, jak wypełniać i kolorować kształty,
zrozumiesz zasadę podawania współrzędnych obiektów.

Implementacja

Twoim zadaniem będzie utworzenie dwóch różnych znaków drogowych, przy wykorzystaniu jedynie podstawowych obiektów SVG. W rezultacie otrzymasz wyniki widoczne na zrzucie ekranu Rys. 1*.*

Rys. 1. Rezultat przykładu zadania, wyświetlany na stronie.

Podstawowe kształty na przykładzie znaku zakazu wjazdu

W tej części zadania zapoznasz się z dwoma podstawowymi kształtami SVG – prostokątem oraz okręgiem i utworzysz za ich pomocą znak zakazu wjazdu:

Utwórz stronę HTML.

W dowolnym edytorze utwórz nowy dokument HTML i wpisz poniższy kod. Tworzy on obszar, na którym wyświetlona zostanie pomocnicza siatka, której linie oddalone są co dziesięć pikseli:

<!DOCTYPE html/>
<html>
    <head>
        <title>Podstawowe kształty 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" />

            <!-- SVG -->

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

Zapisz plik pod nazwą szablon.html.
Zamień linię z komentarzem SVG za pomocą poniższego kodu:

<circle cx="100" cy="100" r="90" fill="red" />
<rect x="20" y="80" width="160" height="40" fill="white" />

Zapisz plik strony HTML pod nazwą zakazwjazdu.html.
Otwórz plik w przeglądarce, powinieneś uzyskać kształt taki, jak na rysunku Rys. 2.

Rys. 2. Znak zakazu wjazdu w SVG bez zaokrąglonej poziomej belki.

Jak widzisz, przeglądarka wyświetliła biały prostokąt, wewnątrz czerwonego koła. Musisz jeszcze zaokrąglić prostokąt. W tym celu przejdź do kodu źródłowego zakazwjazdu.html i zmodyfikuj znacznik rect, dodając przed jego końcem atrybuty rx oraz ry, tak jak poniżej:

<rect x="20" y="80" width="160" height="40" fill="white" rx="5" ry="15" />

Zapisz plik i odśwież stronę ze znakiem. W rezultacie powinieneś otrzymać znak z zaokrąglonym prostokątem, taki jak na wzorcowym Rys. 1. Jeżeli strona wyświetla się niepoprawnie, upewnij się, czy kod strony wygląda tak, jak na Rys. 3.

Rys. 3. Kod wynikowy, wyświetlający znak zakazu wjazdu.

Informacja

Zapewne zauważyłeś, że przy definiowaniu kształtów dodane zostały dwa dodatkowe atrybuty:

fill – definiuje kolor wypełnienia kształtu,
stroke – definiuje kolor wypełnienia obwódki kształtu.

Definicje kolorów podaje się między innymi wskazując angielską nazwę koloru albo jej postać szesnastkową, na przykład wartośćred oraz #FF0000 wyświetlą kolor czerwony. Więcej o definiowaniu kolorów przeczytasz w samouczku Definiowanie kolorów i gradientów w SVG.

Podstawowe kształty na przykładzie znaku nakazu jazdy

W poprzednim zadaniu zapoznałeś się z okręgiem i prostokątem w SVG, tworząc za ich pomocą znak zakazu wjazdu. W tym zadaniu zapoznasz się dodatkowo z kolejnym podstawowym kształtem – wielokątem, a w rezultacie utworzysz kolejny znak.

Otwórz plik z utworzonym w poprzednim zadaniu szablonem strony HTML o nazwie szablon.html.

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

<circle cx="100" cy="100" r="90" fill="white" stroke="black" />
<circle cx="100" cy="100" r="80" fill="blue" />
<!--STRZALKA -->

Zapisz plik pod nazwą nakazjazdy.html.
Otwórz plik w przeglądarce i sprawdź, czy otrzymałeś niebieskie koło wewnątrz większego białego koła z czarną obwódką.

Przejdź ponownie do edytowanego pliku.

Twoim zadaniem będzie utworzenie symbolu strzałki wewnątrz niebieskiego koła. W tym celu wykorzystaj znacznik polygon z listą punktów definiującą jej kształt. Zamień komentarz STRZAŁKA w kodzie strony na poniższy kod :

<polygon points="tutaj umieścisz punkty" fill="white" />

Listę punktów należy umieścić wewnątrz atrybutu points, jednak spróbuj wykonać to samodzielnie przed przejściem do kolejnego punktu. Aby ułatwić sobie wykonanie zadania, zaznacz punkty na siatce i wprowadź je zgodnie z ruchem wskazówek zegara (podając parę współrzędnych x oraz y punktu) – możesz posługiwać się rysunkiem pomocniczym tj. Rys. 4.

Rys. 4. Rysunek pomocniczy z zaznaczonymi punktami, tworzącymi symbol strzałki.

Kod wynikowy wraz z listą punktów powinien wyglądać następująco:

<polygon 
    points="40 85, 110 85, 110 60, 160 100, 110 140, 110 115, 40 115"
    fill="white" />

Zapisz plik strony. Upewnij się, czy kod strony wygląda tak, jak na Rys. 5.

Rys. 5. Kod wynikowy przykładu ze znakiem nakazu.

Sprawdź, czy otrzymałeś taki sam wynik, jak na rysunku wzorcowym tj. Rys. 4.

Informacja

Na początku definiowanie punktów może nie być intuicyjne, ponieważ współrzędne y, znanego ze szkoły układu (tzw. układ kartezjański), wzrastają kierując się w górę, a współrzędne x na prawo. W grafice komputerowej współrzędne x wzrastają podobnie, kierując się w prawo układu, natomiast współrzędne y wzrastają kierując się w dół.

Podsumowanie

W tym samouczku nauczyłeś się, jak korzystać z podstawowych kształtów SVG, wykorzystując je do utworzenia dwóch znaków drogowych. Zapoznałeś się, jak podawać współrzędne punktów i obiektów na rysunku SVG oraz jak definiować kolor wypełnienia i zarys obiektu.

W kolejnym samouczku nauczysz się definiować ścieżki w SVG.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj utworzyć kolejny znak drogowy, przedstawiony na Rys. 6. wykorzystując do tego celu poznane elementy SVG. Jako punktu wyjściowego użyj utworzonego na początku artykułu pliku pod nazwą szablon.html.

Rys. 6. Wynik zadania.

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

Wszystkie figury zostały utworzone za pomocą elementu poligon.
Najpierw utwórz biały kwadrat z czarną obwódką za pomocą elementu polygon. Użyj w nim następujących punktów: 10 100, 100 10, 190 100, 100 190.
Utwórz żółty kwadrat z czarną obwódką. Do jego definicji użyj następujących punktów: 30 100, 100 30, 170 100, 100 170.
Na zakończenie utwórz czarny, przecinający poprzednie figury prostokąt. Do jego definicji, użyj następujących punktów: 140 50, 150 60, 60 150, 50 140.

<!DOCTYPE html/>
<html>
    <head>
        <title>Podstawowe kształty SVG – zadanie</title>
    </head>
    <body>
        <svg width="200px" height="200px">
        <polygon points="10 100, 100 10, 190 100, 100 190" fill="white" stroke="black" />
        <polygon points="30 100, 100 30, 170 100, 100 170" fill="yellow" stroke="black" />
        <polygon points="140 50, 150 60, 60 150, 50 140" fill="black" />
        </svg>
    </body>
</html>