git @ Cat's Eye Technologies The-Dipple / d7f21c6
Add simple-simple dynamically-generated SVG example. Chris Pressey 10 years ago
1 changed file(s) with 47 addition(s) and 0 deletion(s). Raw diff Collapse all Expand all
+47
-0
javascript/svg.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>Dynamically-generated SVG</title>
4 </head>
5 <body>
6
7 <h1>Dynamically-generated SVG</h1>
8
9 <div id="container"></div>
10
11 </body>
12 <script>
13
14 var elem = document.getElementById('container');
15
16 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
17
18 var rect = document.createElementNS(svg.namespaceURI, "rect");
19 rect.setAttribute("id", "rect");
20 rect.setAttribute("x", 100);
21 rect.setAttribute("y", 100);
22 rect.setAttribute("width", 500);
23 rect.setAttribute("height", 200);
24 rect.setAttribute("fill", '#603020');
25 svg.appendChild(rect);
26 rect.onclick = function(e) {
27 rect.setAttribute("fill", "yellow");
28 };
29
30 var circ = document.createElementNS(svg.namespaceURI, "circle");
31 circ.setAttribute("id", "circ");
32 circ.setAttribute("cx", 100);
33 circ.setAttribute("cy", 100);
34 circ.setAttribute("r", 50);
35 circ.setAttribute("fill", "black");
36 circ.setAttribute("stroke", "white");
37 svg.appendChild(circ);
38 circ.onclick = function(e) {
39 circ.setAttribute("r", circ.getAttribute("r") - 5);
40 };
41
42 elem.appendChild(svg);
43 svg.style.height = "300px"; // otherwise, shapes get chopped off; 100px seems to be the default
44 //svg.style.overflow = "scroll"; // no workie
45
46 </script>