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

Question

I have created a line chart with SVG (polygon points) that I would like animated.

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.

It seems there is no simple way to achieve this, with the googling I have done. Any tips would be most appreciated, thanks.

Answer 1

What do you mean by "animating from the X axis" exactly? 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. You can also use one of a number of SVG graphing or animation libraries.

Answer 2

This effect can be easily achieved with transform:scaley keyframe animation:

(javascript code in followind snippet is only for generating random svg polygon)

 let n = 5, w = innerWidth - 20, h = innerHeight - 20; let pts = Array(n).fill(0).map((_, i) => [(1+i)*(w/(n+1)), -Math.random()* h]); document.body.innerHTML += `<svg width=${w} height=${h} viewbox=0,${-h},${w},${h} > <polygon points=0,0,${pts},${w},0 /></svg>`;

 @keyframes grow { 0% {transform: scaley(0)} 100% {transform: scaley(1)} } polygon { fill: #e45; animation: grow 0.5s forwards; }

Answer 3

I have done something in the past, this was however with a single control point of a SVG Bezier curve. However I think you can apply the same principle. I think you need to do the following steps

1. Create an array with y values of the curves
2. Create a jQuery animate function with a step method for each y value [jquery animate 1

animate example

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