javascript - 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>

然后，在脚本文件中，我希望该组在鼠标悬停事件时缩放为原始大小的两倍，并在鼠标移出时返回到其原始大小:

<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>

但是，在第一次鼠标悬停事件时，该组以某种方式平移(移动)到左上角，并停留在那里，这是为什么？如何使该组在缩放时保持原位？

我把文件here .

Answer 1

您需要包含已到位的初始转换，否则它将被覆盖，因此您需要原始转换然后新转换，所以而不是

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