Artykuł
11/28/2011

Kurs HTML5 – SVG – Definiowanie wzorów i wypełnień

Autor: Marcin Dembowski

Opublikowano: 2011-11-25

Obiekty i krawędzie dowolnych obiektów SVG, oprócz wypełniania kolorami i gradientami, można wypełnić także utworzonym wzorem, zdefiniowanym przez inne obiekty SVG. Ma to zastosowanie przy tworzeniu wypełnień użytkownika, wykresów oraz zaznaczania części wspólnych zbiorów na wykresie. Własnych wzorów można użyć do wypełnienia kształtów (ścieżek, kół, prostokątów, tekstu), a także ich krawędzi.

Przed wykonaniem zadań powinieneś wiedzieć:

Czym jest SVG
Jak tworzyć pliki stron HTML i pliki tekstowe w dowolnym edytorze
Jak osadzać SVG na stronach
Jak definiować kolory i wypełnienia w SVG
Jak grupować elementy w SVG

Po wykonaniu zadań:

dowiesz się, w jaki sposób tworzyć wzory, które możesz użyć do wypełniania obiektów,
nauczysz się manipulować wzorami.

Implementacja

Twoim zadaniem będzie zaznajomienie się z metodą tworzenia wzorów w SVG poprzez wykonanie grafiki, przedstawionej na Rys. 1*.*

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

Definiowanie szablonu strony

W tym kroku utworzysz szablon strony HTML, wraz z osadzonym SVG:

Utwórz stronę HTML z osadzonym SVG.

W dowolnym edytorze utwórz nowy dokument HTML i wpisz poniższy kod:

<!DOCTYPE html>
<html>
<head>
    <title>Definiowanie wzorów SVG</title>
</head>
<body>
    <svg width="240px" height="240px" style="background:white">
    <defs>
        <!-- DEFINICJE -->
    </defs>
        <!-- ODWOŁANIA -->
    </svg>
</body>
</html>

Zapisz plik pod nazwą svg_patterns.html.

Definiowanie wzoru wypełnienia na przykładzie wzoru strony zeszytu w kratkę

W tym kroku zapoznasz się ze sposobem definiowania wzorów w SVG. Zdefiniujesz wzór, który będzie odwzorowywał wypełnienie kartki z zeszytu w kratkę. Wypełnienie to jest używane w wielu ćwiczeniach dotyczących SVG. W rezultacie zbudujesz siatkę, której linie oddalone będą co dziesięć pikseli.

Zamień linie z komentarzem DEFINICJE za pomocą poniższego kodu:

<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="lightgray" fill="none" />
    <line x1="0" y1="0" x2="0" y2="10" stroke="lightgray" fill="none"/>
</pattern>
<!-- DEFINICJE -->

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

<rect x="0" y="0" width="100%" height="100%" fill="url(#rulerPattern)" stroke="black" />
<!-- ODWOŁANIA -->

Zapisz plik i otwórz go w przeglądarce. Powinieneś zobaczyć siatkę, taką jak na Rys. 2.

Rys. 2. Imitacja strony zeszytu w kratkę w SVG.

Manipulowanie wzorami

W poprzednim kroku dowiedziałeś się, w jaki sposób definiować i używać utworzonych wzorów do wypełnienia prostokąta. W tym kroku nauczysz się manipulować wzorami:

Utwórz definicję gradientu, podobną do tej utworzonej w poprzednim kroku defs.

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

<pattern id="linePattern" x="0" y="0" width="10" height="10" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
    <g stroke="blue" fill="white" >
    <line x1="0" y1="0" x2="10" y2="0" />
    <line x1="0" y1="5" x2="10" y2="5" />
    <line x1="0" y1="10" x2="10" y2="10" />
    </g>
</pattern>

<pattern id="linePattern2" xlink:href="#linePattern" />
<pattern id="linePattern3" xlink:href="#linePattern" />

Utwórz koła, które wypełnione będą powyższymi wzorami. Zamień linię z komentarzem ODWOŁANIA za pomocą poniższego kodu:

<g stroke="blue" stroke-width="2">
    <circle cx="120" cy="80" r="70" fill="url(#linePattern)" />
    <circle cx="80" cy="160" r="70" fill="url(#linePattern2)" />
    <circle cx="160" cy="160" r="70" fill="url(#linePattern3)" />
</g>

Zapisz plik i otwórz go w przeglądarce. Powinieneś otrzymać obraz, zgodny z Rys. 3.

Rys. 3. Koła wypełnione wzorem.

Każde koło wypełnione jest tym samym wzorem, jednak każdy wzór ma swoją nazwę. Jeśli będziesz chciał, aby każde koło wyróżniało się w pewien sposób, pozostawiając przy tym ten sam pierwotny wzór wypełnienia, użyj do tego celu transformacji wzoru, do wymuszenia obrotu wypełnienia.

Zmodyfikuj wzór o id linePattern2, dodając do niego atrybut patternTransform, tak jak zostało to pokazane poniżej:

<pattern id="linePattern2" xlink:href="#linePattern" patternTransform="rotate(45)" />

Zmodyfikuj wzór o id linePattern3, dodając do niego atrybut patternTransform, tak jak zostało to pokazane poniżej:

<pattern id="linePattern3" xlink:href="#linePattern" patternTransform="rotate(-45)" />

Zapisz plik i otwórz go w przeglądarce. Powinieneś otrzymać grafikę, taką jak na rysunku wzorcowym Rys. 1.

Podsumowanie

W tym artykule nauczyłeś się, w jaki sposób można zdefiniować wzory w SVG. Dzięki zdobytej wiedzy, możesz teraz tworzyć własne wypełnienia obiektów SVG.

W kolejnym artykule nauczysz się wykorzystywać style CSS w SVG.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj utworzyć wypełnienie, takie jak wypełnienie koła przedstawione na Rys. 4.

Rys. 4. Zadanie – wypełnienie koła.

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

Wypełnienie tworzą kwadraty o bokach długości 8 punktów.
Użyj transformacji wypełniania – obrotu o 45 stopni.

<!DOCTYPE html>
<html>
<head>
    <title>Definiowanie wzorów SVG – zadanie</title>
</head>
<body>
    <svg width="240px" height="240px" style="background:white">
    <defs>
        <pattern id="linePattern" x="0" y="0" width="10" height="10" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect x="2" y="2" width="6" height="6" fill="red" />
        </pattern>
    </defs>
        <circle stroke="red" stroke-width="2" cx="120" cy="120" r="100" fill="url(#linePattern)" />
    </svg>
</body>
</html>