Переход полилиний SVG Animate

Может ли кто-нибудь опубликовать пример того, как анимировать полилинию или путь 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>

svg svg-animate
person user3455395    schedule 25.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете анимировать ломаную линию с помощью 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>
person Robert Longson    schedule 26.06.2014