2

任何人都可以发布如何为 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>
4

1 回答 1

2

您可以通过 animate 标签使用 SMIL 为多段线设置动画。如果您需要 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>
于 2014-06-26T08:31:06.970 回答