Javascript 如何通过动画更改Snap.svg中多边形的点？

我正在尝试实现一个按钮，按钮上有一个多边形，按下该按钮时，多边形会变成其他多边形。例如，按钮上的播放图标变为停止图标。理想情况下，图标应该是一个多边形，有三个点描绘游戏符号。动画完成后，它会变成一个由四个点（一个正方形）组成的多边形，描绘停止符号

我试着这样做：

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

---

单击按钮一次，我调用sqrFunc；再次单击按钮，我调用triFunc。我尝试将不同的点数组分配给“点”，因为当我查询tri.attr（“点”）时，我会将分配的点作为返回值。但是，尝试这样分配数组会导致错误。非常感谢您对此问题提供的任何帮助。

我没有发现您的代码有任何错误，但是由于三角形只有3个点，因此转换并没有按预期进行

我用一根绳子把它修好了

var-tpts=[100100130120115]

试试这个

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

另一种方法是使用路径

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

总而言之。解决方案是让一个三角形有4个点，其中两个点是相同的。