Snap.svg：縮尺変更されたグループ滞在を維持する方法は？

Question

私はこのような単純なSVGファイルを持っている：

<svg id="mySVG" /*other attributes"*/>  
    <group id="mixUps"> 
    <ellipse /*ellipse atributtes blabla*/ /> 
    <path /*this is a star-shaped path*/ /> 
    <rect /*rect attributes*/ /> 
    /* 
    Basically this is just a simple SVG group containing an ellipse, a path and a rectangle 
    */ 
    </g> 
</svg> 

をしてから、スクリプトファイルには、私はこのグループが、それはmouseoverイベントで元のサイズだし、それがマウスアウトで元のサイズだに戻す倍スケーリングすることにしたいです。

<script> 
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); 
</script> 

は、しかし、最初のmouseoverイベントで、何とか翻訳グループは、左上隅に（移動）、およびそこにとどまり、これはなぜですか？このグループを拡大縮小すると、その位置にとどまるようにする方法は？

ファイルhereを貼り付けました。

Answer 1

はあなたがTHEN新しい変換元の変換したいので、それ以外の場合は、上書きされてしまいます、初期にはそれが所定の位置にあります変換含める必要があるので、代わりに

mixUps.animate({transform: 's2'}, 250); 

使用の

mixUps.animate({transform: this.transform() + 's2'}, 250); 

jsfiddle

元の変換を保存しておけば後で元の変換に戻すことができます。

jsfiddle

mixUps.data('originalTransform', mixUps.transform()) 
... 
mixUps.animate({transform: this.data('originalTransform') + 's2'}, 250); 
... 
mixUps.animate({transform: this.data('originalTransform') }, 250);