Dragging

01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
03:      width="600px" height="400px" viewBox="0 0 600 400"
04:      stroke="black" stroke-width="0.5px" 
05:      onload="setup()" onmousemove="drag(evt)" onmouseup="release(evt)">
06: 
07: <script>
08: // <![CDATA[
09: 
10: var svgNS = "http://www.w3.org/2000/svg";
11: 
12: var dragging=false;
13: var clickx=0;
14: var clicky=0;
15: var copy;
16: 
17: function setup() {
18:    copy=document.getElementById("copy");
19: }
20: 
21: function startDragging(evt){
22:    // Get the mouse location:
23:    var position = document.rootElement.createSVGPoint();
24:    position.x = evt.clientX;
25:    position.y = evt.clientY;
26:    var matrix = copy.getScreenCTM();
27:    var correctPosition=position.matrixTransform(matrix.inverse());
28:    lastx = correctPosition.x;
29:    lasty = correctPosition.y;
30:    
31:    dragging=true;
32: }
33: 
34: function drag(evt) {
35:    if (dragging) {
36:       // Get the mouse location:
37:       var position = document.rootElement.createSVGPoint();
38:       position.x = evt.clientX;
39:       position.y = evt.clientY;
40:       var matrix = copy.getScreenCTM();
41:       var correctPosition = position.matrixTransform(matrix.inverse());
42:       newx = correctPosition.x;
43:       newy = correctPosition.y;
44:       
45:       if (newx != lastx) {
46:          copyx=parseFloat(copy.getAttributeNS(null, "x"));
47:          copy.setAttributeNS(null,"x",copyx+newx-lastx);
48:          lastx=newx;
49:       }
50:        
51:       if (newy != lasty) {
52:          copyy=parseFloat(copy.getAttributeNS(null, "y"));
53:          copy.setAttributeNS(null,"y",copyy+newy-lasty);
54:          lasty=newy;
55:       }
56:    }
57: }
58: 
59: function release(evt) {
60:    dragging=false;
61: }
62: 
63: // ]]>
64: </script>
65: 
66: <defs>
67:    <g id="Pumpkin">
68:       <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
69:       <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
70:       <circle cx="-30" cy="-30" r="20" fill="black"/>
71:       <circle cx="30" cy="-30" r="20" fill="black"/>
72:       <polygon points="0,0 20,25 -20,25" fill="black"/>
73:       <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
74:    </g>
75: </defs>
76: 
77: 
78: <g transform="scale(0.5)">
79:    <use id="copy" xlink:href="#Pumpkin" x="100" y="350" onmousedown="startDragging(evt)"/>
80: </g>
81: 
82: </svg>

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600px" height="400px" viewBox="0 0 600 400"
     stroke="black" stroke-width="0.5px" 
     onload="setup()" onmousemove="drag(evt)" onmouseup="release(evt)">

<script>
// <![CDATA[

var svgNS = "http://www.w3.org/2000/svg";

var dragging=false;
var clickx=0;
var clicky=0;
var copy;

function setup() {
   copy=document.getElementById("copy");
}

function startDragging(evt){
   // Get the mouse location:
   var position = document.rootElement.createSVGPoint();
   position.x = evt.clientX;
   position.y = evt.clientY;
   var matrix = copy.getScreenCTM();
   var correctPosition=position.matrixTransform(matrix.inverse());
   lastx = correctPosition.x;
   lasty = correctPosition.y;
   
   dragging=true;
}

function drag(evt) {
   if (dragging) {
      // Get the mouse location:
      var position = document.rootElement.createSVGPoint();
      position.x = evt.clientX;
      position.y = evt.clientY;
      var matrix = copy.getScreenCTM();
      var correctPosition = position.matrixTransform(matrix.inverse());
      newx = correctPosition.x;
      newy = correctPosition.y;
      
      if (newx != lastx) {
         copyx=parseFloat(copy.getAttributeNS(null, "x"));
         copy.setAttributeNS(null,"x",copyx+newx-lastx);
         lastx=newx;
      }
       
      if (newy != lasty) {
         copyy=parseFloat(copy.getAttributeNS(null, "y"));
         copy.setAttributeNS(null,"y",copyy+newy-lasty);
         lasty=newy;
      }
   }
}

function release(evt) {
   dragging=false;
}

// ]]>
</script>

<defs>
   <g id="Pumpkin">
      <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
      <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
      <circle cx="-30" cy="-30" r="20" fill="black"/>
      <circle cx="30" cy="-30" r="20" fill="black"/>
      <polygon points="0,0 20,25 -20,25" fill="black"/>
      <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
   </g>
</defs>


<g transform="scale(0.5)">
   <use id="copy" xlink:href="#Pumpkin" x="100" y="350" onmousedown="startDragging(evt)"/>
</g>

</svg>