Javascript 如何在不使用css的情况下实现路径中的动画_Javascript_Jquery_Html_Svg

Javascript 如何在不使用css的情况下实现路径中的动画

javascript jquery html svg

Javascript 如何在不使用css的情况下实现路径中的动画,javascript,jquery,html,svg,Javascript,Jquery,Html,Svg,我有以下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_s

我有以下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>

我想在samebehaviour中实现这个（）动画

如何实现这一点？不使用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元素已被弃用，因此不再使用该元素已绘制为矩形。

网络上有大量画布矩形动画教程/演示-例如Chrome已收到他们对SMIL的弃用，因此您这样做的原因不再相关。