SVG - Definiowanie kolorów i gradientów  Udostępnij na: Facebook

Autor: Marcin Dembowski

Opublikowano: 2011-11-24

Zawartość podstawowych kształtów liter czy krawędzi można w dowolny sposób wypełniać kolorami. SVG pozwala w łatwy sposób definiować różnego rodzaju kolory i gradienty, które możesz wykorzystywać do wypełniania tła strony lub też poszczególnych obiektów.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań:

  • zrozumiesz zasadę definiowania i nazewnictwa podstawowych kolorów,
  • dowiesz się, w jaki sposób definiować i używać gradienty,
  • nauczysz się manipulować gradientami, otrzymując różnego rodzaju wypełnienia.

Implementacja

Twoim zadaniem będzie zaznajomienie się z metodą tworzenia kolorów i gradientów w SVG poprzez wykonanie poniższej grafiki. Rys. 1*.*

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

Definiowanie szablonu strony

Utwórz szablon strony HTML wraz z osadzonym SVG, wyświetlającym siatkę pomocniczą:

  1. Utwórz stronę HTML z osadzonym SVG.
  • W dowolnym edytorze utwórz nowy dokument HTML i wpisz następujący kod:
<!DOCTYPE html>
<html>
<head>
    <title>Definiowanie kolorów SVG</title>
</head>
<body>
    <svg width="340px" height="250px" style="background:white">
        <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>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#rulerPattern)" stroke="gray" />
        <defs>
            <!-- DEFINICJE -->
        </defs>
        <!-- ODWOŁANIA -->
    </svg>
</body>
</html>
  • Zapisz plik pod nazwą svg_colors.html.

Definiowanie kolorów

Zapoznaj się ze sposobem definiowania kolorów w SVG. Zdefiniuj dwa rzędy prostokątów. Każdy prostokąt, znajdujący się w tej samej kolumnie, wyświetlać będzie za pomocą różnego sposobu identyczny kolor.

  • Zamień linie z komentarzem ODWOŁANIA za pomocą poniższego kodu:
<rect fill="red" x="10" y="10" width="50" height="20" stroke="black" />
<rect fill="green" x="70" y="10" width="50" height="20" stroke="black" />
<rect fill="blue" x="130" y="10" width="50" height="20" stroke="black" />
<rect fill="yellow" x="190" y="10" width="50" height="20" stroke="black" />

<rect fill="#FF0000" x="10" y="40" width="50" height="20" stroke="black" />
<rect fill="rgb(0,128,0)" x="70" y="40" width="50" height="20" stroke="black" />
<rect fill="#0000FF" x="130" y="40" width="50" height="20" stroke="black" />
<rect fill="rgb(255,255,0)" x="190" y="40" width="50" height="20" stroke="black" />
<!-- ODWOŁANIA -->
  • Zapisz plik i otwórz go w przeglądarce, powinieneś otrzymać rezultat zgodny z Rys. 2.

Rys. 2. Prostokąty wypełnione podstawowymi kolorami w SVG.

Informacja

Zwróć uwagę na to, w jaki sposób definiowałeś kolory wypełnienia prostokątów. Pierwszy rząd zdefiniowany został za pomocą odpowiednika angielskiej nazwy koloru, to jest red, green, blue, yellow. Przeważnie kolory w programach komputerowych definiuje się poprzez używanie przestrzeni barw RGB (Red Green Blue). W ten sposób określa się wartość każdego podstawowego koloru (czerwonego, zielonego czy niebieskiego), otrzymując w rezultacie pozostałe kolory i odcienie. W ten sposób zdefiniowany został drugi rząd prostokątów. Tutaj również wykorzystałeś dwa sposoby definiowania kolorów:

  • podając wartość szesnastkową koloru tak, jak w poniższym przykładzie, w której definiujemy odpowiednio wartość dla każdego podstawowego koloru:

    Czerwony = #FF0000,
    Niebieski = #0000FF,
  • używając funkcji rgb, która jako parametry przyjmuje liczbę dziesiętną, określającą wartość dla każdego składowego koloru:

    Zielony = rgb(0,128,0),
    Żółty = rgb(255,255,0),

Wykaz odpowiedników angielskich nazw kolorów oraz ich wartości RGB możesz znaleźć na stronie http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Definiowanie gradientów

W poprzednim kroku dowiedziałeś się, w jaki sposób definiować i używać podstawowych kolorów SVG. W tym kroku nauczysz się definiować i obsługiwać gradienty kolorów. Gradient pozwala na liniowe przechodzenie z jednego koloru na inny kolor, wzdłuż określonego kierunku. SVG pozwala na definiowanie dwóch typów gradientów: liniowych i radialnych oraz na ich transformacje.

  1. Utwórz definicję gradientu tęczy w kontenerze defs.
  • Zamień linię z komentarzem DEFINICJE za pomocą poniższego kodu:
<linearGradient id="linearRainbow">
    <stop offset="5%" stop-color="red" />
    <stop offset="20%" stop-color="orange" />
    <stop offset="35%" stop-color="yellow" />
    <stop offset="50%" stop-color="green" />
    <stop offset="65%" stop-color="blue" />
    <stop offset="80%" stop-color="indigo" />
    <stop offset="95%" stop-color="violet" />
</linearGradient>
<!-- DEFINICJE -->
  • Zamień linię z komentarzem ODWOŁANIA za pomocą poniższego kodu:
<rect fill="url(#linearRainbow)" x="10" y="70" width="230" height="20" stroke="black" />
<!-- ODWOŁANIA -->
  • Zapisz plik i otwórz go w przeglądarce. Powinieneś otrzymać dodatkowy prostokąt wypełniony gradientem tęczy tak, jak na rysunku Rys. 3. (na poprzednim rysunku dodane obiekty zostały zamglone).

Rys. 3. Prostokąt wypełniony gradientem tęczy.

  1. W poprzednim kroku, gradient wypełnił cały obiekt. Możesz wymusić także, aby obiekt był wypełniony zdefiniowanym gradientem jedynie do określonej części, a następnie, aby był wypełniony jego powtórzeniem lub odbiciem. Do określenia sposobu służy atrybut spreadMethod.
  • Zamień linię z komentarzem DEFINICJE za pomocą poniższego kodu, który definiuje gradient w pierwszej linii. Gradient ten od połowy wyświetli odbicie, a w drugiej linii powtórzenie.
<linearGradient id="reflectedLinearRainbow"
    spreadMethod="reflect"
    x2="50%"
    xlink:href="#linearRainbow" />

<linearGradient id="repeatedLinearRainbow"
    spreadMethod="repeat"
    x2="50%"
    xlink:href="#linearRainbow" />
<!-- DEFINICJE -->
  • Zamień linię z komentarzem ODWOŁANIA za pomocą poniższego kodu:
<rect fill="url(#reflectedLinearRainbow)" x="10" y="100" width="230" height="20" stroke="black" />

<rect fill="url(#repeatedLinearRainbow)" x="10" y="130" width="230" height="20" stroke="black" />
<!-- ODWOŁANIA -->
  • Zapisz plik i otwórz go w przeglądarce. Wówczas powinieneś zobaczyć dwa dodatkowe prostokąty, wypełnione gradientem tęczy, tak, jak na rysunku Rys. 4. Górny prostokąt wypełniony jest do połowy gradientem tęczy, a następnie jego odbiciem. Dolny prostokąt również wypełniony jest do połowy gradientem tęczy, a następnie jego powtórzeniem. Na rysunku, poprzednio dodane obiekty zostały zamglone, natomiast punkt powtórzenia i odbicia gradientu oznaczony został linią pionową.

Rys. 4. Prostokąty wypełnione gradientem tęczy (odbicie oraz powtórzenie).

Informacja
Na pewno zauważyłeś, że w przykładzie z odbiciem i powtórzeniem gradientu, pojawił się dodatkowy atrybutx2 wraz z procentową wartością. Odbicie i powtórzenie dostępne jest jedynie wówczas, gdy sam gradient nie wypełnia całości obiektu tylko jego część. W przykładzie wymusiłeś wypełnienie obiektu jedynie do jego połowy. Granice wypełnień określają współrzędne x1, x2, y1, y2, których wartości domyślne są równe, odpowiednio 0%, 100%, 0%, 100%.
  1. SVG pozwala także na transformacje gradientu. Dzięki temu możesz zmienić kąt wypełniania i zamiast poziomowego wypełnienia, możesz otrzymać wypełnienie pionowe. Do tego celu służy atrybut gradientTransform.
  • Zamień linię z komentarzem DEFINICJE za pomocą następującego kodu:
<linearGradient
    id="rotatedLinearRainbow"
    gradientTransform="rotate(90)"
    xlink:href="#linearRainbow" />
<!-- DEFINICJE -->
  • Zamień linię z komentarzem ODWOŁANIA za pomocą następującego kodu:
<rect fill="url(#rotatedLinearRainbow)" x="250" y="10" width="20" height="230" stroke="black" />
<!-- ODWOŁANIA -->
  • Zapisz plik i sprawdź, czy otrzymałeś dodatkowy obiekt, tak jak zostało to przedstawione na Rys. 5.

Rys. 5. Pionowy prostokąt z obróconym gradientem.

  1. Możesz również zastosować gradient w taki sposób, aby wypełnił obiekt fragmentem, zależnie od jego położenia na SVG. Do tego celu musisz zmienić system obliczania współrzędnych za pomocą atrybutu gradientUnits.
  • Zamień linię z komentarzem DEFINICJE za pomocą poniższego kodu:
<linearGradient
    id="useSpaceLinearRainbow"
    gradientUnits="userSpaceOnUse"
    xlink:href="#rotatedLinearRainbow" />
<!-- DEFINICJE -->
  • Zamień linię z komentarzem ODWOŁANIA za pomocą poniższego kodu:
<rect fill="url(#useSpaceLinearRainbow)" x="280" y="10" width="20" height="50" stroke="black" />
<rect fill="url(#useSpaceLinearRainbow)" x="280" y="70" width="20" height="50" stroke="black" />
<rect fill="url(#useSpaceLinearRainbow)" x="280" y="130" width="20" height="50" stroke="black" />
<rect fill="url(#useSpaceLinearRainbow)" x="280" y="190" width="20" height="50" stroke="black" />
<rect fill="url(#useSpaceLinearRainbow)" x="310" y="10" width="20" height="230" stroke="black" />
<!-- ODWOŁANIA -->
  • Zapisz plik i otwórz go w przeglądarce. Powinieneś otrzymać dodatkowe obiekty, które widoczne są na Rys. 6. Zauważ, w jaki sposób gradient je wypełnia.

Rys. 6. Wypełnienie wspólnym gradientem różnych obiektów SVG.

  1. Oprócz gradientów liniowych, SVG pozwala również na definicję gradientów radialnych. Różnica pomiędzy nimi jest taka, że gradient radialny posiada środek, od którego odchodzą promieniście kolejne kolory gradientu. Sama definicja gradientu jest identyczna.
  • Zamień linię z komentarzem DEFINICJE za pomocą poniższego kodu, definiującego gradient radialny. Zauważ, że wykorzystujesz w nim istniejącą definicję kolorów z gradientu liniowego.
<radialGradient id="radialRainbow" xlink:href="#linearRainbow" />
  • Zamień linię z komentarzem ODWOŁANIA za pomocą poniższego kodu:
<circle fill="url(#radialRainbow)" cx="50" cy="200" r="40" stroke="black" />
<rect fill="url(#radialRainbow)" x="100" y="160" width="80" height="80" stroke="black" />
<rect fill="url(#radialRainbow)" x="190" y="160" width="50" height="20" stroke="black" />
<rect fill="url(#radialRainbow)" x="200" y="190" width="30" height="50" stroke="black" />
  • Zapisz plik i otwórz go w przeglądarce. Powinieneś otrzymać pozostałe obiekty, a w rezultacie cały obraz wzorcowy z Rys. 1.

Podsumowanie

W tym samouczku nauczyłeś się, jak korzystać z kolorów i wykorzystywać gradienty w SVG. Nauczyłeś się wypełniać obiekty kolorami i gradientami oraz poznałeś zasadę definiowania kolorów i manipulowania gradientami.

W kolejnym samouczku nauczysz się definiować wzory i wypełnienia w SVG.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj narysować obrazek przedstawiony na Rys. 7.

Rys. 7. Wynik zadania – definiowanie gradientów w SVG.

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

  • W tym przykładzie wykorzystane zostały trzy proste obiekty SVG – prostokąt, który przedstawia niebo, prostokąt, który przedstawia trawę oraz koło, które symbolizuje słońce.
  • Użyj następujących kolorów do utworzenia gradientu nieba: darkblue, blue, lightblue, white.
  • Użyj następujących kolorów do utworzenia gradientu nieba trawy: lightgreen, green, darkgreen.
  • Użyj następujących kolorów do zdefiniowania słońca: orange, yellow.
  • Gradient nieba i trawy jest gradientem liniowym, obróconym o 90 stopni.
  • Gradient słońca jest gradientem radialnym.
  • Użyj następujących przesunięć kolorów dla gradientu nieba: 10%, 30%, 55%, 75%.
  • Użyj następujących przesunięć kolorów dla gradientu trawy: 10%, 70%, 80%.
  • Użyj następujących przesunięć kolorów dla gradientu słońca: 30%, 85%.
<!DOCTYPE html>
<html>
<head>
    <title>Definiowanie kolorów SVG – zadanie</title>
</head>
<body>
    <svg width="340px" height="250px" style="background:white">
    <defs>
        <linearGradient id="skyGradient" radientTransform="rotate(90)">
            <stop offset="10%" stop-color="darkblue" />
            <stop offset="30%" stop-color="blue" />
            <stop offset="55%" stop-color="lightblue" />
            <stop offset="75%" stop-color="white" />
        </linearGradient>
        <linearGradient id="grassGradient" gradientTransform="rotate(90)">
            <stop offset="10%" stop-color="lightgreen" />
            <stop offset="70%" stop-color="green" />
            <stop offset="80%" stop-color="darkgreen" />
        </linearGradient>
        <radialGradient id="sunGradient">
            <stop offset="30%" stop-color="orange" />
            <stop offset="85%" stop-color="yellow" />
        </radialGradient>
    </defs>
    <rect fill="url(#skyGradient)" x="10" y="10" width="320" height="150" />
    <rect fill="url(#grassGradient)" x=10" y="160" width="320" height="80" />
    <circle cx="270" cy="60" r="40" fill="url(#sunGradient)" />
    </svg>
</body>
</html>