SVG definice, gradienty, filtry
Cvičení 5
Z8144 Počítačová grafika v kartografii
Jaro 2020
Filip Leitner
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozvrh
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 2 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defs – definice objektů
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 4 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – gradienty
lineární × radiální
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 5 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Lineární gradienty
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 6 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Radiální gradienty
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 7 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úloha 1
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 8 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – filtry
Umožňují změnu chování objektu
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 9 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Gausovské rozostření (Gaussian Blur)
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 10 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Embedded/inlined SVG filters
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 11 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Úloha 2
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 14 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
CSS Filtre
Filip Leitner SVG definice, gradienty, filtry Počítačová grafika 15 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 18
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
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 / 18
Díky za pozornost!
. . . . . . . . . . . . . . . . . . . .