javascript - 如何为SVG多边形点设置动画？(How to animate SVG polygon points?)

Question

I have created a line chart with SVG (polygon points) that I would like animated.(我用动画创建了带有SVG（多边形点）的折线图。)

I would like the points to all start animating from the X axis, and when finished animating, the result to look like the following image.(我希望所有这些点都从X轴开始进行动画处理，并在完成动画处理后，结果看起来像下面的图像。) It seems there is no simple way to achieve this, with the googling I have done.(用我完成的谷歌搜索，似乎没有简单的方法可以实现这一目标。) Any tips would be most appreciated, thanks.(任何提示将不胜感激，谢谢。)   ask by Keith Donegan translate from so

Answer 1

What do you mean by "animating from the X axis" exactly?(确切地说，“从X轴动画”是什么意思？)

Do you mean start flat and grow upwards to this shape?(您是说从平坦开始并向上成长为这种形状吗？) If so, it is actually very easy.(如果是这样，这实际上非常容易。) <svg viewBox="0 0 2040 352"> <defs> </defs> <polygon points="" fill="red"> <animate attributeName="points" dur="1s" fill="freeze" from="0,352, 550,352, 1240,352, 1592,352, 1880,352, 2040,352, 2040,352,0,352" to="0,292, 550,232, 1240,258, 1592,158, 1880,168, 2040,0, 2040,352,0,352"/> </polygon> </svg> This example uses vanilla SVG SMIL animations.(本示例使用香草SVG SMIL动画。) You can also use one of a number of SVG graphing or animation libraries.(您也可以使用许多SVG图形或动画库之一。)