Question

有人可以发布一个如何为svg折线或路径设置动画的示例吗？

我想设置从蓝线到灰线的过渡动画。理想情况下，我正在寻找一种能够解决任何灰线问题的解决方案，而不知道它的坐标数量。分。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height: 200px; width: 500px; border: 1px solid #ccc;">

        <svg height="200" width="500" xmlns="http://www.w3.org/2000/svg">
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
                      style="fill: none; stroke: gray; stroke-width: 3" />

            <polyline points="20,20 40,20 60,20 80,20 120,20 200,20"
                      style="fill: none; stroke: blue; stroke-width: 3" />
        </svg>
    </div>
</body>
</html>

Answer 1

您可以使用SMIL通过animate标签为折线设置动画。如果您需要IE支持，那么您必须使用fakeSmile之类的内容。

您需要保持点数相同，即如果您有一个10点多边形，则必须将其转换为10点多边形以获得平滑过渡，否则它将执行步进更改过渡。您可以随时将其中一个多边形上的点加倍，使它们具有相同的点数。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div style="height: 200px; width: 500px; border: 1px solid #ccc;">

        <svg height="200" width="500" xmlns="http://www.w3.org/2000/svg">
            <polyline points="20,20 40,20 60,20 80,20 120,20 200,20"
                      style="fill: none; stroke: blue; stroke-width: 3">
                <animate dur="5s" fill="freeze" attributeName="points"
                         to="20,20 40,25 60,40 80,120 120,140 200,180"/>
                <animate dur="5s" fill="freeze" attributeName="stroke"
                         to="gray"/>
            </polyline>
        </svg>
    </div>
</body>
</html>

SVG Animate polilines过渡

1 个答案: