Анимировать по очереди SVG Path

#javascript #svg

Как анимировать сначала первый тег path, а затем другой?



function ready() {

  var path;
  var elem = document.getElementById("elem");
  var line = elem.getElementsByTagName("path");

  for (var i = 0; line.length > i; i++) {

    line[i].style.strokeDashoffset = path;
    line[i].style.strokeDasharray = path;
    path = line[i].getTotalLength();

    document.getElementById("btn").onclick = function() {
      var int = setInterval(draw, 50);

      function draw() {
        if (path <= 0) {
          clearInterval(int);
        } else {
          path += 20 * (-1);
          line[i].style.strokeDashoffset = path;
        }
      }
    }
  }
}

document.addEventListener("DOMContentLoaded", ready);






    

Ответы

Ответ 1

Pure SVG    








Добавил viewport  width="200" height="200", так как без этого подпись была на весь
экран. Исправил path, так как в статике не видно было разрыва линии, но при анимации
на месте разрыва была остановка.
добавил строки, реализующие анимацию c id="an1"и  id="an2" соответственно  Начало
первой анимации команда begin="0" Второй анимации - begin="an1.end", то есть видно,
что она запускается после окончания первой анимации.  Команда - restart="whenNotActive"
служит для запрета повторной анимации, пока не закончилась текущая анимация.       

Принцип действия 

Линия скрывается установкой stroke-dashoffset равной длине пути. А затем stroke-dashoffset
уменьшается до нуля, тем самым реализуя эффект рисования линии. Подробнее здесь.
Длину линии, которую будем подставлять, можно вычислить по этому способу. 
Это важно, так как наугад подставлять длину в stroke-dashoffset не стоит.
Если её длина будет намного больше реальной длины патча, то будет задержка между
анимациями, если меньше, то часть линии будет всегда видна.


Ответ 2

Анимация с помощью JS



   




Принцип действия тот же, как и в варианте с SVG. 
Измеряется длина пути с помощью команды getTotalLength() и подставляется в команду
stroke-dashoffset. Анимация достигается при плавном уменьшении значения атрибута stroke-dashoffset
от максимума - длины пути - до нулевого значения, обеспечивая тем самым рисование линии
от нуля до конца.
Когда закончится первая анимация id="an1" рисование букв, начинается вторая анимация
по команде begin="an1.end"


Ответ 3

Доработал патч, дуги стали более ровные, буквы немного подправил, добавил анимацию
градиентов.     



   




Анимация градиентов здесь работает только в FF.  Хром, опера, яндекс, IE -всё мимо.
 fiddle


Ответ 4

С одним тегом работает скрипт
html:



		function ready() {

    var path;
    var line = document.getElementById("elem");
        path = line.getTotalLength();
        line.style.strokeDashoffset = path;
        line.style.strokeDasharray = path;

    document.getElementById("btn").onclick = function() {
            var int = setInterval(draw, 50);

            function draw() {
                if (path <= 0) {
                    clearInterval(int);
                } else {
                    path += 20 * (-1);
                    line.style.strokeDashoffset = path;
                }
            }
        }
}

document.addEventListener("DOMContentLoaded", ready);