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事件中将此组缩放两倍于原始大小，并在mouseout处返回原始大小：

<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

你需要包含初始变换，否则它会被覆盖，所以你想要原始变换那么新的变换，所以而不是

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：如何使缩放组保持原位？

1 个答案: