SVG: esimerkki 3 DOM

CSS

HTML

Javascript

let kuva = document.getElementById("kuva");
// svg-elementit on luotava oikeaan nimiavaruuteen. Tavallinen createElement-metodi
// ei kelpaa, koska se luo kaiken HTML:n nimiavaruuteen 
 let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 let rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
 svg.appendChild(rect);
 svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
 svg.setAttribute("version", "1.1");
 svg.setAttribute("width", "300");
 svg.setAttribute("height", "200");
 kuva.appendChild(svg);

// luodaan suorakaide
 rect.setAttribute("x", "0");
 rect.setAttribute("y", "0");
 rect.setAttribute("width", "100%");
 rect.setAttribute("height", "100%");
 rect.setAttribute("fill", 'red');
 document.body.appendChild(svg);

// luodaan ympyrä
 let circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
 svg.appendChild(circle);
 circle.setAttribute("cx", "150");
 circle.setAttribute("cy", "100");
 circle.setAttribute("r", "80");
 circle.setAttribute("fill", "green");

// luodaan teksti
 let text = document.createElementNS("http://www.w3.org/2000/svg","text");
 svg.appendChild(text);
 text.setAttribute("x", "150");
 text.setAttribute("y", "125");
 text.setAttribute("font-size", "60");
 text.setAttribute("text-anchor", "middle");
 text.setAttribute("fill", "white");
 text.textContent = "SVG";

CSS

HTML

Javascript

Konsoli