figures/shape.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Interactive SVG with Javascript</title>
   5 <script type="text/javascript" id="ohgodnowhatamIdoing">
   6         var count = 0;
   7         function interact()
   8         {
   9                 setTimeout(function () {
  10                         var colour = (count % 2 == 0) ? "#000000" : "#00ff00";
  11                         document.getElementById("rect1").style.fill = colour;
  12                         count += 1;
  13                 },1000);
  14         }
  15 </script>
  16 </head>
  17 <body>
  18 <svg id="svg_example" xmlns="http://www.w3.org/2000/svg"
  19         version="1.1" width="104" height="186">
  20 <path id="straightline" d = "m 0, 0 104, 186" style="stroke:#000000;"/>
  21 <rect id="rect1"
  22         x = "30" y = "20" width = "30" height = "150"
  23         style = "fill:#0000ff; fill-opacity:0.5; stroke:#000000;"/>
  24 <path id="path"
  25         d = "m 57,185 c 0,0 57,-13 32,-43 -25,-30 -53,2 -25,-30 28,
  26                 -32 52,17 28,-32 -24,-50 -16,44 -35,12 -19,-32 13,-64 13,
  27                 -64 0,0 40,-50 -0,-14 -40,36 -94,68 -59,109 35,41 45,62 45,62 z"
  28         style = "fill:#ff0000; fill-opacity:0.75; stroke:#000000;"/>
  29 <rect id="rect2"
  30         x = "12" y = "130" width = "60" height = "20"
  31         style = "fill:#00ff00; fill-opacity:0.5; stroke:#000000;"/>
  32 </svg>
  33 <img src="shape.svg"/>
  34
  35 <button id="ohdearabutton" onclick="interact();">Asplode</button>
  36
  37
  38 </body>
  39 </html>