Lekcja 19

SVG i CSS

1. inscape
2. wskazanie
3. myszka

Obiekty SVG można poddać kontroli Kaskadowych Arkuszy Stylów CSS. Ma to duże znaczenie między innymi w tworzeniu map i diagramów, gdzie wymagana jest skalowalność obiektów bez utraty jakości Możemy też kontrolować zachowanie obiektów, na przykład po wskazaniu myszką.

Graficzny program wektorowy SVG
Tworzenie skomplikowanych kształtów może być trudne, jeśli posługujemy się „pokratkowaną kartką papieru” i próbujemy ręcznie wyliczać położenie punktów. Każdy program do obróbki grafiki wektorowej, w tym też darmowy Inkscape ma możliwość wyeksportowania rysunku w postaci pliku svg. Najwygodniej jednak kopiować poszczególne krzywe i uzupełniać je o niezbędne informacje już w notatniku.

Jak to zrobić w Inkscape? Po narysowaniu obiektu otwieramy edytor XML: Edycja - Edytor XML. Wyszukujemy element path oraz jego parametr d i kopiujemy współrzędne obiektu do notatnika. Czerwonym kolorem zaznaczono skopiowaną zawartość edytora XML. Czarny kolor – informacje dopisane ręcznie do pliku HTML. Teraz wystarczy zapisać plik z rozszerzeniem HTML lub SVG (po drobnej modyfikacji kodu) i gotowy, skalowalny rysunek na stronie WWW.

<svg width="200px" height="200px">
<path d="
  M 88.62511,188.14179 C 20.514887,172.1094 3.579858,102.79234 8.6013487,28.217761 
  c 29.3287083,0 54.5862093,0 80.0237613,-19.9905034 26.32782,19.9905034 46.1237,19.9905034 
  80.02376,19.9905034 C 173.95045,102.79234 152.244,172.36928 88.62511,188.14179 Z
" fill="red" stroke-width="2" stroke="black" />
<path d="
  m 89.201623,166.10002 c -6.226246,0 -12.471086,0 -18.715921,0 7.044026,
 -15.63718 7.917562,-32.38867 7.917562,-49.12157 H 53.330992 V 101.24842 
  H 78.403264 V 56.528283 c -6.449283,0 -21.987025,17.642905 -21.987025,31.441515 
  H 22.55287 L 89.201623,25.086766 155.85039,87.969798 c -11.28159,0 -22.56318,
  0 -33.86337,0 C 121.68966,75.656908 106.89534,56.528283 100,56.528283 v 44.720137 
  h 25.07228 v 15.73003 H 100 c -0.76203,16.7329 0.55758,32.74153 7.91755,49.12157 z
" fill="white" stroke-width="2" stroke="black" />
</svg>

Zawartość ramki może być również włączona do dowolnego pliku HTML, jeśli jednak chcemy wyświetlać grafikę podobnie jak każdy obrazek, np. <img src=grafika.svg>, to nagłówek w pliku grafika.svg, powinien być uzupełniony o kod zaznaczony czerwonym kolorem.

<svg width="200px" height="200px"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink=http://www.w3.org/1999/xlink
>

Reakcja na wskazanie
Kod w ramce tworzy uśmiechniętą twarz. Naszym zadaniem będzie „dorysować” twarzy kilka drobnych elementów po wskazaniu jej myszką. Zmianie ulegną oczy, dorysowane zostaną język i rumieńce. W ramce dodatkowe wiersze kodu.

<svg width="200px" height="200px">
<g class="usmiech">
  <circle id="twarz" cx="100" cy="100" r="70" fill="yellow" stroke="black"/>
  <rect class="oczy" x="70" y="60" width="10" height="40"  />
  <rect class="oczy" x="100" y="60" width="10" height="40" />
  <path id="mina" d="M 50 120 C80 160 150 120 140 110" fill="transparent" stroke="black" stroke-width="5"/>
</g>
</svg>

Każdy element rysunku, który będziemy podmieniać na inny opisujemy za pomocą class, jeśli kilka podobnych elementów będziemy zmieniać za jednym razem lub id, gdy zmieniamy je osobno. Kod z ramki wstawiamy do klasy usmiech.

<rect class="oczy2" x="55" y="80" width="30" height="10"  />
<rect class="oczy2" x="95" y="80" width="30" height="10"  />
<circle class="rumieniec" cx="50" cy="120" r="10" fill="orange" stroke="red"/>
<circle class="rumieniec" cx="140" cy="110" r="10" fill="orange" stroke="red"/>
<path id="jezyk" d="M 85 140 C90 160 110 160 110 135" fill="red" stroke="black" stroke-width="5"/>

Myszka
Możemy od razu zdefiniować kolor, długość, szerokość i inne cechy rysowanych obiektów, albo też uzyskać do nich dostęp na późniejszym etapie. Za pomocą kropki „.”, dla znacznika class lub znaku „#”, gdy opisaliśmy element znacznikiem id. Aby poszczególne elementy rysunku reagowały na wskazanie myszką (znacznik hover) zdefiniujemy style, które będą widoczne lub niewidoczne po wskazaniu.

Aby rysunek SVG reagował na wskazanie myszką możemy wykorzystać znane z JavaScript polecenie onmouseover, lub też zaprząc do pracy tylko Kaskadowe Arkusze Stylów i zasymulować wskazanie obiektu myszką poleceniem hover.

<defs>
  <style type="text/css">
   .usmiech #twarz {fill: yellow; stroke:black;}
   .usmiech .oczy {fill: black; visibility: visible;}
   .usmiech .oczy2 {visibility: hidden;}
   .usmiech .rumieniec {fill: orange; stroke: red; visibility: hidden;}
   .usmiech #mina {fill: transparent; stroke: black; stroke-width: 5;}
   .usmiech #jezyk {visibility: hidden; stroke: black; stroke-width: 5; fill: red;}
   .usmiech:hover #jezyk {visibility: visible;}
   .usmiech:hover .rumieniec {visibility: visible;}
   .usmiech:hover .oczy {visibility: hidden;}
   .usmiech:hover .oczy2 {visibility: visible;}
  </style> 
</defs>