Rickard Rickard - 1 month ago 5x
Javascript Question

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

I have a simple SVG file like this :

<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

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 :

var mySvg = Snap("#mySvg");
var mixUps = mySvg.select("#mixUps");

function mixCursor(evt){
mixUps.animate({transform:"s2"}, 250);
}else if(evt.type==="mouseout"){
mixUps.animate({transform:"s1"}, 250);


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?

I put the file here.

Ian Ian

You need to include the initial transform that's in place, otherwise it will get overwritten, so you want original transform THEN new transform, so instead of

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


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


Or better is to store the original transform, so we can revert back to it later...


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