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

时间:2016-12-27 05:00:23

标签: 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_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元素,所以不再使用该元素已被绘制为矩形..

0 个答案:

没有答案