SVG definice, gradienty, filtry
Cvičení 5
Z8144 Počítačová grafika v kartografii
Jaro 2020
Šimon Leitgeb
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Defs – definice objektů
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.
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Defs – definice objektů
Defs – definice objektů
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="120"
style="background-color:white">
<defs>
<rect id="rect1" width="200" height="100" x="10" y="10" fill="green" stroke="black"
stroke-width="3"/>
<circle id="circ1" cx="10" cy="10" r="5" fill="white" stroke="black"
stroke-width="3"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#circ1"/>
<use x="200" xlink:href="#circ1"/>
<use y="100" xlink:href="#circ1"/>
<use x="200" y="100" xlink:href="#circ1"/>
</svg>
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Lineární gradienty
Radiální gradienty
Příklad použití
SVG – gradienty
lineární × radiální
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Lineární gradienty
Radiální gradienty
Příklad použití
Lineární gradienty
<svg width="250" height="120">
<defs>
<linearGradient id="g1" x1="100%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="white"/>
<stop offset="60%" stop-color="blue"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
</defs>
<rect width="250" height="120" x="0" y="0" fill="url(#g1)"/>
</svg>
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Lineární gradienty
Radiální gradienty
Příklad použití
Radiální gradienty
<svg width="250" height="120" >
<defs>
<radialGradient id="g2" cx="10%" cy="10%" r="100%">
<stop stop-color="red" offset="0%"/>
<stop stop-color="orange" offset="50%"/>
</radialGradient>
</defs>
<rect x="0" y="0" width="250" height="120" fill="url(#g2)" />
</svg>
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Lineární gradienty
Radiální gradienty
Příklad použití
Příklad použití
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Gausovské rozostření (Gaussian Blur)
SVG – filtry
Umožňují změnu chování objektu
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Gausovské rozostření (Gaussian Blur)
Gausovské rozostření (Gaussian Blur)
<svg width="250" height="120" style="background-color:white">
<defs>
<filter id="f1" width="200%" height="200%" x="-50%" y="-50%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
</filter>
</defs>
<rect width="100" height="30" x="25" y="25" fill="red"
filter="url(#f1)"/>
</svg>
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
Gausovské rozostření (Gaussian Blur)
Přehled filtrů v SVG
https://www.w3.org/TR/filter-effects/
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
SVG, JS – přidávání prvků
<svg id="testsvg"></svg>
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);
Šimon Leitgeb SVG definice, gradienty, filtry
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SVG – defs
SVG – gradienty
SVG – filtry
SVG, JS – přidávání prvků
SVG, JS – přidávání prvků
<svg >
<g id="g1"></g>
</svg>
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);
Šimon Leitgeb SVG definice, gradienty, filtry
Díky za pozornost!
https://discord.gg/TKt6s3n
. . . . . . . . . . . . . . . . . . . .