title: Snap.svg: how to make scaled group stays in place?
body: <p>I have a simple SVG file like this :</p>
  
  <pre><code>&lt;svg id="mySVG" /*other attributes"*/&gt;      
    &lt;group id="mixUps"&gt;
      &lt;ellipse /*ellipse atributtes  blabla*/ /&gt;
      &lt;path /*this is a star-shaped path*/ /&gt;
      &lt;rect /*rect attributes*/ /&gt;
    /* 
     Basically this is just a simple SVG group containing an ellipse, a path and a rectangle
    */
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>and then, in the script file, I want this group to be scaled twice it's original size at mouseover event, and return to it's original size at mouseout :</p>
  
  <pre><code>&lt;script&gt;
  var mySvg = Snap("#mySvg");
  var mixUps = mySvg.select("#mixUps");
  
  function mixCursor(evt){
    if(evt.type==="mouseover"){
        mixUps.animate({transform:"s2"}, 250);
    }else if(evt.type==="mouseout"){
          mixUps.animate({transform:"s1"}, 250);
    }
  }
  
  mixUps.mouseover(mixCursor);
  mixUps.mouseout(mixCursor);
  &lt;/script&gt;
  </code></pre>
  
  <p>However, at the first mouseover event, the group somehow translated (moved) to upper-left corner, and stays there, why is this? How to make this group stays in place when scaled?</p>
  
  <p>I put the file <a href="http://www.pristineparadise.com/practices/tesGroupTransform.svg" rel="nofollow">here</a>.</p>