Grazie dell'aiuto.
Siccome mi serviva in svg, ho provato ad adattare il codice:

codice:
<!DOCTYPE html>
<html>
  <head>
     <title></title>
     <meta name="viewport" content="width=device-width">
     <meta charset="UTF-8">
  </head>
  <body>
    <div id="container">
    

      <div id="gioco">
        <svg id='unisci' width='430' height='800'></svg>
      </div>
    
        
    </div>
    
    
    
    <script src="jquery-3.1.1.min.js"></script>
    <script src="snap.svg-min.js"></script>
    <script>

    var s = Snap('#unisci');
    
    var c1 = s.circle(150, 150, 10),
        c2 = s.circle(50, 10, 10),
        c3 = s.circle(10, 60, 10),
        c4 = s.circle(100, 30, 10),
        
        g = s.paper.g(c1, c2, c3, c4);

    
    var ultimoPunto = { x: null, y: null };
      s.mousedown(function(e){
         
          var rect = s.getBBox();
         
         
          var punto = {
              x: e.clientX - rect.x,
              y: e.clientY - rect.y
          }; 
          
          if (ultimoPunto.x && ultimoPunto.y) {
              var line = s.paper.line(ultimoPunto.x, ultimoPunto.y, punto.x, punto.y);
              line.attr({
 stroke:"#ff0000",
 strokeWidth:6 
});
          }

          ultimoPunto = punto;
      }); 
    
    
    </script>
  </body>
</html>

Adesso il problema è che le linee non vengono esattamente dove clicco, credo che il problema sia la variabile "rect".
Inoltre avrei bisogno che al click, prima di un cerchio e poi dell'altro, in successione, apparissero le linee a collegarli.
Ho provato a sostituire al mousedown l'intero spazio svg con i cerchi ma non sono riuscita ad ottenere quello che volevo, sicuramente perchè ho sbagliato qualche passaggio.

C'è un modo per farlo?

Grazie in anticipo