Javascript SVG多边形变换

我正在尝试转换SVG

元素

代码笔在这里：

我有这样一个多边形：

现在，当我更改

points

属性的值时，我可以看到浏览器中反映的更改

我的目标是使用转换（例如

转换：所有2s ease 0s

）来查看此更改的动画

这在任何方面都可行吗

在连接的代码笔中，单击按钮时，

点

值将被替换，但

转换

动画不起作用

谢谢，

---

Karol

您只能在指定为CSS“属性”的属性上使用CSS动画<代码>点不是其中之一-至少现在还不是

但是，您可以使用SVG的SMIL动画功能为其设置动画

---

我不推荐SMIL，因为它的支持有限，在不久的将来将被弃用。CSS动画不适用于属性，所以JS是唯一的方法。下面是一个例子：

var getPoints=函数（isDeeper）{
返回深度？
'0 0,  45 0, 150 150, 255 0, 300 0, 300 200, 0 200, 0 0' :
'0 0, 145 0, 150  20, 155 0, 300 0, 300 200, 0 200, 0 0';
};
var pointsToObj=函数（点）{
var ps=点。匹配（/\d+/g）。映射（编号），
obj={length:ps.length}；
ps.forEach（函数（n，i）{
obj['''+i]=n；
});
返回obj；
};
var objToPoints=功能（obj）{
var ps=[]；
对于（变量i=0；i

单击以更改
，随着SVG2的更新，svg的js动画的支持将与SMIL一样有限。（您的示例不适用于FF）。有关于不赞成SMIL的链接吗？（不要告诉我chrome的“这对我们来说太难了！”）它确实在FF上起作用，我的错，错过了按钮：/但是，还有关于官方反对的链接吗？