我有以下svg内容,
<html>
<body>
<div id="animation">
<svg id="svg" style="width: 882.5px; display: block; height: 450px;">
<g id="cvg" transform="translate(38,20)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)">
<path id="Point_1" d="M 129.07916666668473 498.25 L 129.07916666668473 186.84375 L 268.08749999998196 186.84375 L 268.08749999998196 498.25 " fill="rgba(135,206,235,1)"></path>
<path id="Point_2" d="M 327.6625000000181 498.25 L 327.6625000000181 174.3875 L 466.6708333333153 174.3875 L 466.6708333333153 498.25 " fill="rgba(135,206,235,1)"></path>
<path id="Point_3" d="M 526.2458333333514 498.25 L 526.2458333333514 161.93124999999998 L 665.2541666666485 161.93124999999998 L 665.2541666666485 498.25 " fill="rgba(135,206,235,1)"></path>
<path id="Point_4" d="M 724.8291666666847 498.25 L 724.8291666666847 99.64999999999998 L 863.837499999982 99.64999999999998 L 863.837499999982 498.25 " fill="rgba(135,206,235,1)"></path>
<path id="Point_5" d="M 923.412500000018 498.25 L 923.412500000018 62.28125 L 1062.4208333333154 62.28125 L 1062.4208333333154 498.25 " fill="rgba(135,206,235,1)"></path>
<path id="Point_6" d="M 1121.9958333333514 498.25 L 1121.9958333333514 124.5625 L 1191.5 124.5625 L 1191.5 498.25 " fill="rgba(135,206,235,1)"></path>
</g>
</svg>
</div>
</body>
</html>
我希望在同一行程中实现这个(https://www.amcharts.com/demos/column-with-rotated-series/)动画
怎么实现这个?不使用css ...使用像js函数或任何东西.. 我不知道这个..
我在矩形元素中尝试过这种行为但没有用..
<html>
<body>
<div id="akbar">
<svg width="400" height="200" viewBox="0 0 400 200">
<g transform="scale(1,-1) translate(0,-200)">
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate attributeName="height" from="0" to="100" dur="1s" fill="freeze" values="0; 200; 150; 160; 150; 160" />
</rect>
</g>
</svg>
</div>
</body>
</html>
因为不推荐使用animate元素,所以不再使用该元素已被绘制为矩形..