Отображать анимированные элементы SVG последовательно

Question

У меня есть сайт с изображением простой векторной карты, и я пытаюсь нарисовать на нем линии, которые отображаются как зрители один за другим.

Я получил это далеко;

http://codepen.io/anon/pen/aEFDw

Но я не могу понять, как показать линии одну за другой.

Кстати, я также изо всех сил пытаюсь использовать суперскроллорам.

Буду признателен за любые выводы!

Answer 1

Вы можете использовать SMIL для анимации SVG. Чтобы получить эффект "цепочки", установите

begin="0s" <!-- last animation End time -->

на каждом элементе после анимации предыдущего элемента https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL