Interaktivita SVG + JavaScript
Cvičení 3
Z8144 Počítačová grafika v kartografii
Jaro 2019
Šimon Leitgeb
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
Syntaxe
Příklady
Základní tvary
rectangle rect obdélník/čtverec
circle circle kruh
ellipse ellipse elipsa
line line úsečka
polygon polygon
polyline polyline lomená čára
path path trasa
text text
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
Syntaxe
Příklady
Trasa Path
Velká písmena – absolutní pozice
malá písmena – relativní pozice
moveto M(x y)+ (posun na místo)
closepath Z- (uzavření trasy)
lineto L(x y)+ (vykresli čáru až do bodu)
horizontal lineto H(x)+ (rovnoběžná čára až do)
vertical lineto V(y)+ (svislá čára)
curveto C(x1 y1 x2 y2 x y)+
smooth curveto S(x2 y2 x y)+
quadratic Bézier curve Q(x1 y1 x y)+
smooth quadratic Bézier curveto T(x y)+
elliptical Arc A(…) (eliptická výšeč/úseč)
http://www.w3.org/TR/SVG/paths.html
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
Syntaxe
Příklady
Trasa – příklad 1
<svg width="250" height="250" style="background-color: white;">
<path stroke="black" stroke-width="3" fill="red"
d="M10,10 L110,10 L110,110 L10,110 L10,10"/>
<path stroke="black" stroke-width="3" fill="green"
d="M130,10 l100,0 l0,100 l-100,0 l0,-100"/>
<path stroke="black" stroke-width="3" fill="teal"
d="M10,130 H110 V230 H10 z"/>
<path stroke="black" stroke-width="3" fill="yellow"
d="M130,130 h100 v100 h-100 z"/>
</svg>
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
Syntaxe
Příklady
Trasa – příklad 2
<svg width="250" height="120" style="background-color:
white;">→
<path stroke="black" stroke-width="3" fill="none"
d="M10,100 C50,50 190,10 240,100"/>→
</svg>
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
Syntaxe
Příklady
Trasa – příklad 3
<svg width="250" height="120"
style="background-color:white">→
<path fill="none" stroke="black" stroke-width="3"
d="M10,75 Q60,25 110,75 T210,75"/>→
</svg>
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
onclick
onmouseover / onmouseout
onkeydown / onkeyup
JavaScript – základní eventy (události)
onclick kliknutí myší
onmouseover najetí myší na prvek
onmouseout odjetí myší z prvku
onkeydown stisk klávesy
onkeyup konec stisku klávesy
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
onclick
onmouseover / onmouseout
onkeydown / onkeyup
onclick
<div class="test" style="background-color:red;"
onclick="this.style.backgroundColor='green'">→
<h3>Testovací div</h3>
</div>
Příklad: https://codepen.io/LeSimon/pen/ywgovB
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
onclick
onmouseover / onmouseout
onkeydown / onkeyup
onmouseover / onmouseout
function testmouseover(element){
element.style.backgroundColor='green';
};
function testmouseout(element){
element.style.backgroundColor='red';
};
<div class="test" style="background-color:red;"
onmouseover="testmouseover(this)"
onmouseout="testmouseout(this)">
<h3>Testovací div</h3>
</div>
Příklad: https://codepen.io/LeSimon/pen/oVBeqe
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
onclick
onmouseover / onmouseout
onkeydown / onkeyup
onkeydown / onkeyup
function testKeyUp(event){
event.target.style.backgroundColor='red';
}
function testKeyDown(event){
event.target.style.backgroundColor='green';
}
document.getElementById("input").addEventListener("keyup",
testKeyUp);→
document.getElementById("input").addEventListener("keydown",
testKeyDown);→
<input id="input" class="test"
style="background-color:white;"> </input>→
Příklad: https://codepen.io/LeSimon/pen/ywgoEL
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
1. úkol
2. úkol
1. úkol
V SVG:
Vytvořte mapové pole, které bude obsahovat smyšlený stát a
jeho okresy (alespoň 5 okresů).
Toto mapové pole (obrysy jednotlivých krajů) vytvořte pomocí
tras. Použijte i křivky nebo kruhové výseče.
Jednotlivým „krajům“ přidejte atribut ”data-population”,
který bude obsahovat fiktivní data o populaci.
Výsledek si uložte někam na disk (budeme s ním dále
pracovat).
Šimon Leitgeb Interaktivita SVG + JavaScript
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – opakování
JavaScript – opakování
Úkoly
1. úkol
2. úkol
2. úkol
Přidejte interaktivitu této „mapě“. Pomocí JavaScriptu (mimo
SVG) nastavte ”onmouseover” a ”onmouseout” event.
Po najetí myší na libovolný „kraj“ by se tento kraj měl
zabarvit definovanou barvou (vyberte si vlastní). Zároveň by
se někde na stránce měl zobrazit údaj o populaci daného kraje.
Pokud jste správně nastavili atribut data-population, dostanete
se k němu v JS pomocí element.dataset.population
Po odjetí myší se daný kraj odbarvit a informace o populaci
zmizí.
úkol odevzdávejte jako jeden HTML soubor nebo archiv .zip
Šimon Leitgeb Interaktivita SVG + JavaScript
Díky za pozornost!
https://discord.gg/UHTPUDU
. . . . . . . . . . . . . . . . . . . .