Javascript 如何设置SVG多边形点的动画？

我已经创建了一个带有SVG（多边形点）的折线图，我希望将其设置为动画

我希望所有点都从X轴开始设置动画，当完成动画时，结果如下图所示

似乎没有简单的方法来实现这一点，用谷歌搜索我已经做到了。任何提示都将不胜感激，谢谢

---

我过去做过一些事情，但这是通过SVG贝塞尔曲线的单个控制点实现的。然而，我认为你可以应用同样的原则。我认为您需要执行以下步骤

使用曲线的y值创建一个数组

为每个y值创建一个带有步长方法的jQuery动画函数[jQuery animate]

动画示例

$({ n: 0 }).animate({ n: 40}, {
        duration: 1000,
        step: function(calculatedYValue, fx) {
            //update graphs with calculatedYValue
            console.log(parseInt(calculatedYValue), 10);   
        }
    });    

你所说的“从X轴设置动画”到底是什么意思？你的意思是从平面开始，然后向上生长到这个形状

如果是这样的话，其实很容易

---

使用

变换：缩放

关键帧动画：

（followind代码段中的javascript代码仅用于生成随机svg多边形）

设n=5，w=innerWidth-20，h=innerHeight-20；
设pts=Array（n）.fill（0）.map（（u，i）=>[（1+i）*（w/（n+1）），-Math.random（）*h]）；
document.body.innerHTML+=`
`;

@关键帧增长{
0%{transform:scaley（0）}
100%{transform:scaley（1）}
}
多边形{
填充：#e45；
动画：向前增长0.5秒；
}

注意，Internet Explorer甚至Edge（2019年3月）都不支持这一点。我们没有更简单的方法吗？比如通过

x

或

y

属性移动整个多边形？回答得很好。使用JS解决SVG问题对我来说很有趣。