• Artykuł

          

Kurs HTML5 - SVG - Style CSS  Udostępnij na: Facebook

Autor: Marcin Dembowski

Opublikowano: 2011-11-28

Obiekty SVG, tak jak większość elementów HTML, można oddać kontroli Kaskadowych Arkuszy Stylów. Ma to zastosowanie między innymi w mapach i diagramach, gdzie dla tej samej mapy (na przykład mapy administracyjnej Polski) chcesz przedstawić różne wartości, zależnie od tego, co użytkownika interesuje (gęstość zaludnienia, bezrobocie przypadające na województwo itp.). Dodatkowo możesz w łatwy sposób zmienić zachowanie obiektu SVG, na przykład zmieniając jego kolor w momencie najechania kursorem myszy.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań:

  • dowiesz się, w jaki sposób dołączać Kaskadowe Arkusze Stylów do SVG,
  • nauczysz się odwoływać do elementów SVG w CSS.

Implementacja

Twoim zadaniem będzie zaznajomienie się z metodą użycia Kaskadowych Arkuszy Stylów dla SVG do utworzenia poniższej grafiki, która po najechaniu kursorem myszy zmieni swój stan. Zostało to pokazane 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:

  1. 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>CSS 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" />
<defs>
    <!-- STYL -->
</defs>
<g class="smiley">
    <circle cx="100" cy="100" r="70" id="face" />
    <rect x="70" y="60" width="10" height="40" class="eye" />
    <rect x="100" y="60" width="10" height="40" class="eye" />
    <rect x="55" y="80" width="30" height="10" class="eye2" />
    <rect x="95" y="80" width="30" height="10" class="eye2" />
    <circle cx="50" cy="120" r="10" class="blush" />
    <circle cx="140" cy="110" r="10" class="blush" />
    <path d="M 85 140 C90 160 110 160 110 135" id="tongue" />
    <path d="M 50 120 C80 160 150 120 140 110" id="smile" />
</g>
</svg>
</body>
</html>
  • Zapisz plik pod nazwą svg_css.html i otwórz go w przeglądarce. Powinieneś zobaczyć obrazek, taki jak na Rys. 2. Zawiera on wszystkie elementy twarzy bez kontroli CSS i definicji wypełnień.

Rys. 2. Szablon SVG zawierający elementy postaci bez stylów CSS.

Definiowanie stylów w CSS

W tym kroku zajmiesz się zdefiniowaniem stylu dla wykonywanej twarzy. Określisz kolor oraz widoczność wszystkich elementów, które powinny być dostępne, gdy kursor myszy nie będzie ustawiony nad obrazkiem. Postać, wykonywana przez Ciebie, składa się z kilku podstawowych elementów:

  • twarzy, która jest zdefiniowana przez koło z id równym face,
  • oczu, zdefiniowanych przez dwie pary prostokątów o id eye i eye2 – druga para widoczna będzie po najechaniu myszą na twarz,
  • rumieńców z id równym blush, zdefiniowanych przez koła,
  • uśmiechu i języka, zdefiniowanych przez ścieżki o id odpowiednio smile i tongue.

Wszystkie obiekty twarzy są zgrupowane w element grupującyg, który zawiera także informacje na temat klasy stylu smiley, określającej styl ogólny postaci.

  1. Definiowanie stylu wewnątrz SVG.
  • Zamień linię z komentarzem STYL za pomocą poniższego kodu:
<style type="text/css"><![CDATA[
    // STYL
] ]></style>
Informacja

W tym kroku dodałeś zagnieżdżony styl wewnątrz SVG. Jest to jedna z kilku metod łączenia SVG z CSS. W przypadku, gdy chcesz dołączyć plik CSS do zewnętrznego pliku SVG, musisz na początku deklaracji pliku wskazać styl za pomocą poniższego polecenia (pogrubiony fragment):

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Możesz także zdefiniować styl wewnątrz konkretnego elementu SVG, używając atrybutu style, tak jak poniżej:

<rect x="10" y="10" width="100" height="100"
style="fill: yellow; stroke: black; stroke-width: 5"/>
  • Określ styl dla twarzy (pamiętaj, że jest to koło o id równym face, które zawarte jest w grupie z klasą stylu smiley). Zamień linię z komentarzem STYL za pomocą poniższego kodu:
.smiley #face {
    fill: yellow;
    stroke:black;
}
// STYL
  • Określ styl dla oczu. Pamiętaj, że są dwie pary oczu, druga para musi być domyślnie ukryta. Zamień linię z komentarzem STYL za pomocą poniższego kodu:
.smiley .eye {
    fill: black;
    visibility: visible;
}
.smiley .eye2 {
    visibility: hidden;
}
// STYL
  • Określ styl dla rumieńców. Pamiętaj, że domyślnie rumieńce muszą być ukryte. Zamień linię z komentarzem STYL za pomocą poniższego kodu:
.smiley .blush {
    fill: orange;
    stroke: red;
    visibility: hidden;
}
// STYL
  • Określ styl dla uśmiechu. Usuń wypełnienie ścieżki, która definiuje uśmiech. Zamień linię z komentarzem STYL za pomocą poniższego kodu:
.smiley #smile {
    fill: transparent;
    stroke: black;
    stroke-width: 5;
}
// STYL
  • Określ styl dla języka. Język ma być wypełnimy kolorem czerwonym. Pamiętaj, że domyślnie musi on zostać ukryty. Zamień linię z komentarzem STYL za pomocą poniższego kodu:
.smiley #tongue {
    visibility: hidden;
    stroke: black;
    stroke-width: 5;
    fill: red;
}
// STYL
  • Zapisz plik i otwórz go w przeglądarce. Powinieneś zobaczyć obrazek z postacią z Rys. 3.

Rys. 3. Wynik użycia stylów CSS w SVG.

Zmiana stylu SVG po najechaniu kursorem na obiekt SVG

W tym kroku zmienisz zachowanie tworzonej postaci w taki sposób, że po najechaniu na nią kursorem myszy, postać zmieni swoje zachowanie. Wobec tego ukryjesz oraz pokażesz niektóre elementy SVG.

  • Zamień linię z komentarzem STYL za pomocą powyższej definicji. Po najechaniu na wykonywaną postać kursorem myszy, określisz w ten sposób widoczność języka.
.smiley:hover #tongue {
    visibility: visible;
}
// STYL
  • Zdefiniuj teraz widoczność rumieńców wykonywanej postaci. Zamień linię z komentarzem STYL za pomocą poniższej definicji:
.smiley:hover .blush {
    visibility: visible;
}
// STYL
  • Zmień teraz widoczność oczu – po najechaniu kursorem myszy na wykonywaną postać, musisz ukryć pierwszą parę, a pokazać drugą parę oczu. Zamień linię z komentarzem za pomocą poniższej definicji:
.smiley:hover .eye {
    visibility: hidden;
}
.smiley:hover .eye2 {
    visibility: visible;
}
  • Zapisz plik i otwórz go w przeglądarce. Najedź kursorem myszy na postać. Postać powinna zmienić swój wygląd tak, jak na Rys. 4.

Rys. 4. Postać w SVG ze zmienionym stanem po najechaniu kursorem myszy.

Podsumowanie

W tym artykule nauczyłeś się, w jaki sposób definiować i kontrolować obiekty SVG za pomocą Kaskadowych Arkuszy Stylów (CSS).

W kolejnym artykule nauczysz się, jak tworzyć zaawansowane animacje z detekcją kolizji w SVG.

Zadanie

Aby sprawdzić swoje umiejętności, spróbuj utworzyć grafikę w SVG, która przedstawia kopertę tak, jak na Rys. 5. Użyj jedynie CSS do zdefiniowania kolorów koperty oraz do zmiany wyglądu koperty, na otwartą, po najechaniu na nią kursorem myszy (prawa część Rys. 5.).

Rys. 5. Wynik zadania.

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

  • Rysunek składa się z czterech elementów.
  • Przód koperty oraz jej zamknięcie utworzone zostały z elementu polygon (zobacz więcej informacji na temat podstawowych kształtów, możesz użyć także ścieżek).
  • Tył koperty oraz list utworzone zostały z elementu rect.
  • Zamknięcie koperty i list są domyślnie ukryte i widoczne po najechaniu na kopertę kursorem myszy.
  • Zgrupuj wszystkie elementy w jedną całość, używając elementu g (zobacz więcej informacji na temat grupowania elementów).
  • Zwróć uwagę na kolejność definiowania poszczególnych części koperty.
<!DOCTYPE html/>
<html>
<head>
    <title>CSS w SVG – zadanie</title>
</head>
<body>
    <svg width="200px" height="200px">
<defs>
<style type="text/css"><![CDATA[
.envelope {
    fill: yellow;
    stroke: black;
    stroke-width: 2;
}
.envelope .closure {
    visibility: hidden;
}
.envelope .letter {
    fill: white;
    visibility: hidden;
}
.envelope:hover .closure {
    visibility: visible;
}
.envelope:hover .letter {
    visibility: visible;
}
] ]></style>
</defs>
<g class="envelope">
        <polygon points="20 80 100 40 180 80" class="closure" />
        <rect x="20" y="80" width="160" height="40" />
        <rect x="40" y="40" width="120" height="80" class="letter" />
        <polygon points="20 80 20 180 180 180 180 80 100 120" />
</g>
</svg>
</body>
</html>