Snap.svg: 如何让scaled group原地不动？

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>

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

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

Snap.svg: 如何让scaled group原地不动？

Snap.svg: how to make scaled group stays in place?

javascript

svg

snap.svg