title: How to Check intersection of Svg elements
body: <p>I am working on a web based application where user can create multiple svg elements. all elements are 'path' (closed path either square or rectangle). User can move and rotate any element.</p>
  
  <p>Now i want to alarm user when one element touches  or intersect any other element .</p>
  
  <p>any help would be appreciated.</p>
  
  <p>thanks.</p>
  
  <p>here is the jsfiddle linke
  <a href="http://jsfiddle.net/nnYSp/" rel="noreferrer">http://jsfiddle.net/nnYSp/</a></p>
  
  <p><strong>Code is :-</strong></p>
  
  <pre><code> &lt;body&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500"&gt;
                &lt;path id="obj1" d="M 100 50 L 150 50 150 120 100 120 z" stroke="black" stroke-width="2" fill="yellow" move transform="translate(10,0) rotate(45,125,85)"/&gt;
  
          &lt;path id="obj2" d="M 150 150 L 200 150 200 200 150 200 z" stroke="red" stroke-width="2" fill="black" move transform="translate(10,0)"/&gt;
  
          &lt;/svg&gt; 
  
          &lt;script type="text/javascript"&gt;
              document.addEventListener('mousedown', mousedown, false);
              document.addEventListener('mousemove', mousemove, false);
              document.addEventListener('mouseup', mouseup, false);
  
              var obj1_rotate_string="rotate(45,125,85)";
              var obj1_translate_values={
                  x:10,
                  y:0
              }
  
              var obj2_rotate_string="";
              var obj2_translate_values={
                  x:10,
                  y:0
              }
  
              var mousedownFlag=false;
              var mousedown={
                  x:0,
                  y:0
              }
  
              var targetObj={
                  t:null,
                  r:null,
                  obj:null
              };
  
              function mousedown(event){
                  if(event.target.hasAttribute('move')){
                      mousedownFlag=true;
                      mousedown.x=event.pageX;
                      mousedown.y=event.pageY;
                      var Obj=event.target.id;                   
                      if(Obj==='obj1'){                        
                          targetObj.obj='obj1'
                      }
                      else{                         
                          targetObj.obj='obj2'
                      }
  
  
                  }
  
              }
  
              function mousemove(event){
                  if(mousedownFlag){
                      var dx=event.pageX-mousedown.x;
                      var dy=event.pageY-mousedown.y;
  
                      if(targetObj.obj==='obj1'){
                          obj1_translate_values.x+=dx;
                          obj1_translate_values.y+=dy;
                          var obj=document.getElementById(targetObj.obj);
                          obj.setAttribute('transform', 'translate('+ obj1_translate_values.x+','+ obj1_translate_values.y+')'+ obj1_rotate_string);
  
                      }
                      else if(targetObj.obj==='obj2'){
                          obj2_translate_values.x+=dx;
                          obj2_translate_values.y+=dy;
                          var obj=document.getElementById(targetObj.obj);
                          obj.setAttribute('transform', 'translate('+ obj2_translate_values.x+','+ obj2_translate_values.y+')'+ obj2_rotate_string);
  
                      }
  
                      mousedown.x=event.pageX;
                      mousedown.y=event.pageY;
                  }
              }
  
              function mouseup(event){
                  mousedownFlag=false;
  
              }
          &lt;/script&gt;
  
      &lt;/body&gt;
  </code></pre>