SVG definice, gradienty, filtry
Cvičení 5
Z8144 Počítačová grafika v kartografii
Jaro 2022
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 2 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
Slouží především k předdefinování znovupoužitelných prvků nebo stylů,
které samy o sobě neposkytují žádnou vizuální reprezentaci.
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 3 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defs – definice objektů
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 4 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – gradienty
lineární × radiální
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 5 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Lineární gradienty
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 6 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Radiální gradienty
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 7 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úloha 1
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 8 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – filtry
Umožňují změnu chování objektu
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 9 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Gausovské rozostření (Gaussian Blur)
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 10 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Embedded/inlined SVG filters
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 11 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Embedded/inlined SVG filters
img {
/* inline the SVG filter */
filter: url('data:image/svg+xml,\
#waves');
}
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 12 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Přehled filtrů v SVG
https://www.w3.org/TR/filter-effects/
https://yoksel.github.io/svg-filters/#/docs/blur
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 13 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úloha 2
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 14 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
CSS Filtre
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 15 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG, JS – přidávání prvků
const svg = document.getElementById('testsvg');
const xmlns = "http://www.w3.org/2000/svg";
const newElement = document.createElementNS(xmlns, 'rect');
newElement.setAttribute("x","10");
newElement.setAttribute("y","10");
newElement.setAttribute("width","100");
newElement.setAttribute("height","100");
newElement.style.stroke = "#000";
newElement.style.strokeWidth = "5px";
newElement.style.fill = "#f00";
svg.appendChild(newElement);
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 16 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG, JS – přidávání prvků
const GROUP = document.getElementById('g1');
const xmlns = "http://www.w3.org/2000/svg";
const newElement = document.createElementNS(xmlns, 'path');
newElement.setAttribute("d","M 10 10 L 50 50 100 50");
newElement.style.stroke = "#000";
newElement.style.strokeWidth = "5px";
newElement.style.fill = "#f00";
GROUP.appendChild(newElement);
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 17 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Drag
Dokumentácia eventov
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 18 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Drag
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 19 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Drag
Čo s tým?
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 20 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Drag
element.addEventListener("mousedown", startDrag);
element.addEventListener("mousemove", drag);
element.addEventListener("mouseup", endDrag);
element.addEventListener("mouseleave", endDrag);
Tutoriál
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 21 / 23
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úkol
Pomocou JS vytvorte červený SVG ’box’ a ’stôl’
Box bude možné presúvať
Ak box presuniete na stôl (približne) zmení sa jeho farba na zelenú
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 22 / 23
Díky za pozornost!
. . . . . . . . . . . . . . . . . . . .