SVG Events

• SVG elements receive UI events such as mouse clicks, focusing
• Compliant with DOM2 event listeners

  <svg xmlns:html="http://www.w3.org/1999/xhtml"
       xmlns="http://www.w3.org/2000/svg"
       onload="init();" >

    <script>
      var dx,dy;
      var circle;

      function init()
      {
        circle = document.getElementById('circ');
        circle.addEventListener("mousedown", mousedown_listener, false);
      }	    

      function mousedown_listener(evt)
      {
        dx = circle.cx.baseVal.value - evt.clientX;
        dy = circle.cy.baseVal.value - evt.clientY;
        document.addEventListener("mousemove", mousemove_listener, true);
        document.addEventListener("mouseup", mouseup_listener, true);
      }

      function mouseup_listener(evt)
      {
        document.removeEventListener("mousemove", mousemove_listener, true);
        document.removeEventListener("mouseup", mouseup_listener, true);
      }

      function mousemove_listener(evt)
      {
        var id = circle.ownerSVGElement.suspendRedraw(1000);
        circle.cx.baseVal.value = evt.clientX + dx;
        circle.cy.baseVal.value = evt.clientY + dy;
        circle.ownerSVGElement.unsuspendRedraw(id);
      }
    </script>
       
    <foreignObject ... >
      <html:img src="torness.jpg" />
    </foreignObject>
    <circle id="circ" r="2cm" cx="5cm" cy="3cm" ... />
  </svg>