Programování SVG pomocí DOM a JavaScriptu

Úvodní prezentace se základy JavaScriptu a SVG manipulace.

Základy JavaScriptu

• Proměnné: let, const, var (rozdíl v rozsahu platnosti)
• Cykly: for, while, foreach
• Podmínky: if, else, switch
• Struktury: pole, objekty
• Funkce: definice a volání funkcí

// let – bloková platnost
let a = 5;

// var – funkční platnost
var b = 10;

// const – konstanta
const PI = 3.14;

// Globální proměnná
var globalni = "Globální proměnná";

// foreach příklad
let pole = [1,2,3];
pole.forEach(item => console.log(item));

// switch příklad
let den = "pondělí";
switch(den) {
  case "pondělí":
    console.log("Začátek týdne");
    break;
  default:
    console.log("Jiný den");
}

// Funkce - příklad
function pozdrav(jmeno){
  return "Ahoj " + jmeno;
}

SVG DOM – Root element

// získání SVG elementu podle ID
let svg = document.getElementById("mojeSVG");

Traversování DOM stromu (SVG příklad)

// potomci SVG elementu
let potomci = svg.children;

// rodič SVG elementu
let rodic = svg.parentNode;

console.log(potomci);
console.log(rodic);

Selektory v DOM

• #id – element podle ID
• .trida – elementy podle třídy
• tag – podle názvu tagu
• [atribut] – podle atributu

// výběr všech kruhů s třídou "modry"
let modreKruhy = document.querySelectorAll("circle.modry");

// výběr prvku podle ID
let jedenKruh = document.querySelector("#hlavniKruh");

Vytváření SVG elementů

// vytvoření kruhu
let kruh = document.createElementNS("http://www.w3.org/2000/svg", "circle");
kruh.setAttribute("cx", 50);
kruh.setAttribute("cy", 50);
kruh.setAttribute("r", 30);
kruh.setAttribute("fill", "red");

// přidání do SVG
svg.appendChild(kruh);

Přesouvání a odstranění SVG elementů

Přesuň kruhy

// Funkce přesune modrý kruh nad červený
function presunoutKruhy(){
  let svg = document.getElementById("presunSVG");
  let modryKruh = document.getElementById("kruhModry");
  svg.appendChild(modryKruh); // přesune modrý kruh nad červený
}

Reakce na události

// Přidání reakce na kliknutí
let kruhUdalosti = document.querySelector("#udalostiSVG circle");
kruhUdalosti.addEventListener("click", () => {
  alert("Kliknuto na kruh!");
});