<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400">
  <script type="text/ecmascript"><![CDATA[
    var state = 0;
    function changeColour() {
      var c = document.getElementById("c");
      state = (state + 1) % 3;
      if (state == 0)
        c.setAttributeNS(null, "fill", "red");
      else if (state == 1)
        c.setAttributeNS(null, "fill", "yellow");
      else
        c.setAttributeNS(null, "fill", "lime");
    }
    function moveRect(e) {
      var r = document.getElementById("r");
      r.setAttributeNS(null, "x", e.clientX - 12.5);
      r.setAttributeNS(null, "y", e.clientY - 12.5);
    }
  ]]></script>
  <circle id="c" cx="200" cy="100" r="50" fill="red" stroke="black" onclick="changeColour()"/>
  <rect x="0" y="200" width="400" height="200" fill="#ccf" onmousemove="moveRect(evt)"/>
  <rect id="r" x="200" y="300" width="25" height="25" fill="#669" stroke="black" pointer-events="none"/>
</svg>

