How to change polygon points in Snap.svg through animation?

Question

I'm trying to implement a button with a specific polygon on it, which when clicked changes the polygon to something else. For example, the play icon on the button changes to a stop icon. Ideally, the icon should be a polygon with three dots representing the play symbol. After the animation, it turns into a polygon of four points (square A), depicting a stop symbol.

I tried to do it like this:

var paper = Snap('svg'); var tpts = [100,100,100,130,120,115]; var sqpts = [100,100,100,130,130,130,130,100]; var tri = paper.polygon(sqpts); tri.attr({ id:"tri", fill:"#555555" }); sqrFunc = function(){ tri.animate({"points":sqpts},1000,mina.linear); } triFunc = function(){ tri.animate({"points":tpts},1000,mina.linear); } 

When I click the button once, I call sqrFunc and click it again, I call triFunc. I tried to assign different point arrays to "points" because when I request tri.attr ("points"), I get the assigned points as the return value. However, an attempt to assign such arrays fails. Any help on this issue is appreciated.

Answer 1

I do not get any errors with your code, however tranformation does not happen as desired because the triangle has only 3 points.

I fixed it with

var tpts = [100,100,100,100,100,130,120,115];

try it

 var paper = Snap('svg'); var tpts = [100,100,100,100,100,130,120,115]; var sqpts = [100,100,100,130,130,130,130,100]; var tri = paper.polygon(tpts); tri.attr({ id:"tri", fill:"#555555" }); sqrFunc = function(){ tri.animate({"points":sqpts},1000,mina.linear); } triFunc = function(){ tri.animate({"points":tpts},1000,mina.linear); } setTimeout(sqrFunc, 200); setTimeout(triFunc, 1200); 

another method is using paths

 var paper = Snap('svg'); var tri = paper.path("M 10 10, L 10 50, L 50 25, Z"); tri.attr({ id:"tri", fill:"#555555" }); sqrFunc = function(){ tri.animate({d:"M 10 10, L 10 50, L 50 50, L50 10,Z"},1000,mina.linear); } triFunc = function(){ tri.animate({d:"M 10 10, L 10 50, L 50 25, Z"},1000,mina.linear); } setTimeout(sqrFunc, 200); setTimeout(triFunc, 1200);