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

Question

Как анимировать сначала первый тег 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 &lt;= 0) {
      clearInterval(int);
    } else {
      path += 20 * (-1);
      line[i].style.strokeDashoffset = path;
    }
  }
}

}
}
document.addEventListener("DOMContentLoaded", ready);

<button id="btn">click</button>

<svg version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
  <path style="fill:none;stroke:#2A2874;stroke-miterlimit:10;" d="M58.8,49.9c-8.5,24.3-8.9,50.7-15.4,75.7 c-3.7,13.9-10.4,28.6-23.6,34.2c-4.2-9.4-0.4-20.3,3.5-29.8c8.8-21.4,18.4-42.8,32.1-61.5c6.2-8.5,14.7-17.1,25.3-16.8 c1,0,2,0.1,2.8,0.6c1.5,0.9,2,2.7,2.3,4.4c1.5,9.1-1.1,18.5-5.6,26.6c-4.5,8-10.9,14.9-17.4,21.4c4.1,0.8,8.3,0.6,12.4,1.2 s8.4,2.3,10.5,5.8c3.4,5.6,0.1,12.8-3.5,18.2c-5.8,8.7-14,17.7-24.5,17.2c12.4-16.9,33.9-23.7,51.5-35.1c13.5-8.8,25-20.8,33.3-34.6 c3.6-6.1,6.8-13.1,5.6-20.1c-0.5-3.3-2.2-6.6-5.2-8c-4,14.9-2,30.8-4.5,46c-2.4,14.6-8.9,28.1-15.3,41.4c-1.7,3.5-3.4,7.1-6.3,9.7 c-2.9,2.6-7.1,4.1-10.7,2.5c-1.9-0.8-3.5-2.7-3.4-4.7c0.2-2.5,3-4.2,5.5-3.9s4.6,1.8,6.4,3.6c4.3,4.3,7.5,10,12.8,12.9 c4.8,2.6,10.8,2.6,15.9,0.8c5.2-1.8,9.7-5.2,13.7-8.9c14-13.1,23-31.3,25-50.4c1.9-19.1-3.3-38.7-14.4-54.4 c-4.8-6.7-10.5-12.6-16.4-18.4c-3.5-3.5-7.1-7-11.5-9.2c-9.7-4.9-21.3-3-31.8-0.4c-19.3,4.8-38.2,11.3-56.3,19.6 c-7.9,3.6-16.1,7.9-21,15.1c-3.6,5.2-5.1,11.6-6.1,17.8c-1.3,8.1-1.8,16.9,2.2,24.1c3.3,5.9,9.1,9.8,15,13.2 c27.1,15.8,58.3,24.8,89.7,25.8c5,0.2,10.1,0.1,14.9-1.5c3.6-1.2,6.9-3.3,10.1-5.4c12.3-7.9,24.5-15.8,36.8-23.6 c3.2-2.1,6.9-5.5,5.4-9"/>
  <path style="fill:none;stroke:#195A2D;stroke-miterlimit:10;" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9 c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9 c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4"/>
</svg>

Мне именно нужно с js анимировать, что если там 2 или больше тега Path, для каждого писать долго, нужно как javascript'м сделать, чтобы по порядку анимировалось — dmitriy, Feb 20 '17 at 14:22
с одним тегом Path я ниже написал рабочий код — dmitriy, Feb 20 '17 at 16:29
рабочий код тот что внизу, там где тег Path один, не работает тот что с двумя тегами Path - и я не знаю почему, поэтому и задал здесь вопрос этот — dmitriy, Feb 20 '17 at 18:18

Alexandr_TT · Answer 1 · 2019-10-24T06:58:57.640

Pure SVG

<svg  version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200" height="200" viewBox="0 0 200 200" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path style="fill:none;stroke:#2A2874;stroke-miterlimit:10;" stroke-width="2" stroke-dasharray="1243"  stroke-dashoffset="1243" d="M 58.8,49.9 C 50.3,74.2 49.9,100.6 43.4,125.6 39.7,139.5 33,154.2 19.8,159.8 15.6,150.4 19.4,139.5 23.3,130 32.1,108.6 41.7,87.2 55.4,68.5 61.6,60 70.1,51.4 80.7,51.7 c 1,0 2,0.1 2.8,0.6 1.5,0.9 2,2.7 2.3,4.4 1.5,9.1 -1.1,18.5 -5.6,26.6 -4.5,8 -10.9,14.9 -17.4,21.4 4.1,0.8 8.3,0.6 12.4,1.2 4.1,0.6 8.4,2.3 10.5,5.8 3.4,5.6 0.1,12.8 -3.5,18.2 -5.8,8.7 -26.208203,32.84354 -24.5,17.2 1.708203,-15.64354 33.9,-23.7 51.5,-35.1 13.5,-8.8 25,-20.8 33.3,-34.6 3.6,-6.1 6.8,-13.1 5.6,-20.1 -0.5,-3.3 -2.81735,-10.298475 -5.2,-8 -9.67278,9.331069 -2,30.8 -4.5,46 -2.4,14.6 -8.9,28.1 -15.3,41.4 -1.7,3.5 -3.4,7.1 -6.3,9.7 -2.9,2.6 -7.1,4.1 -10.7,2.5 -1.9,-0.8 -3.5,-2.7 -3.4,-4.7 0.2,-2.5 3,-4.2 5.5,-3.9 2.5,0.3 4.6,1.8 6.4,3.6 4.3,4.3 7.5,10 12.8,12.9 4.8,2.6 10.8,2.6 15.9,0.8 5.2,-1.8 9.7,-5.2 13.7,-8.9 14,-13.1 23,-31.3 25,-50.4 1.9,-19.1 -3.3,-38.7 -14.4,-54.4 -4.8,-6.7 -10.5,-12.6 -16.4,-18.4 -3.5,-3.5 -7.1,-7 -11.5,-9.2 -9.7,-4.9 -21.3,-3 -31.8,-0.4 -19.3,4.8 -38.2,11.3 -56.3,19.6 -7.9,3.6 -16.1,7.9 -21,15.1 -3.6,5.2 -5.1,11.6 -6.1,17.8 -1.3,8.1 -1.8,16.9 2.2,24.1 3.3,5.9 9.1,9.8 15,13.2 27.1,15.8 58.3,24.8 89.7,25.8 5,0.2 10.1,0.1 14.9,-1.5 3.6,-1.2 6.9,-3.3 10.1,-5.4 12.3,-7.9 24.5,-15.8 36.8,-23.6 3.2,-2.1 6.9,-5.5 5.4,-9">
  <animate id="an1"
    attributeName="stroke-dashoffset"
    begin="0;an2.end+1s"
    values="1243; 0"
    dur="8s"
    fill="freeze"
    calcMode="linear"
    restart="whenNotActive" />

</path>
 &lt;path style="fill:none;stroke:#195A2D;stroke-miterlimit:10;" stroke-width="2" stroke-dasharray="175"  stroke-dashoffset="175" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9
    c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9
    c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4"&gt;
&lt;animate id="an2"
   attributeName="stroke-dashoffset"
   begin="an1.end"
   values="175; 0"
   dur="2s"
   calcMode="linear"
   restart="whenNotActive" /&gt;     

</path>
    </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 не стоит. Если её длина будет намного больше реальной длины патча, то будет задержка между анимациями, если меньше, то часть линии будет всегда видна.

Спустя несколько секунд вижу анимацию волны и всё, так и задумано? — Sasha Omelchenko, Feb 20 '17 at 11:40

Alexandr_TT · Answer 2 · 2017-02-21T18:47:58.223

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

 <svg  version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="200" height="200" viewBox="0 0 200 200" onload="init(evt)" >
<script><![CDATA[
function init(evt)
{svgdoc=evt.target.ownerDocument
varia=svgdoc.getElementById('letter');
long=Math.round(varia.getTotalLength());
varia.setAttribute('stroke-dasharray',long.toString()+","+long.toString());
varia.setAttribute('stroke-dashoffset',long.toString());
obj=svgdoc.getElementById('an1');
obj.setAttribute('from',long.toString());
varia=svgdoc.getElementById('wave');
long=varia.getTotalLength();
varia.setAttribute('stroke-dasharray',long.toString()+","+long.toString());
varia.setAttribute('stroke-dashoffset',long.toString());
obj=svgdoc.getElementById('an2');
obj.setAttribute('from',long.toString());
}
]]></script>
   <rect width="100%" height="100%" fill="dodgerblue" /> 
  <path id="letter" style="fill:none;stroke:white;stroke-miterlimit:10;" stroke-width="4" stroke-dasharray="0,0" stroke-dashoffset="0" d="M 58.8,49.9 C 50.3,74.2 49.9,100.6 43.4,125.6 39.7,139.5 33,154.2 19.8,159.8 15.6,150.4 19.4,139.5 23.3,130 32.1,108.6 41.7,87.2 55.4,68.5 61.6,60 70.1,51.4 80.7,51.7 c 1,0 2,0.1 2.8,0.6 1.5,0.9 2,2.7 2.3,4.4 1.5,9.1 -1.1,18.5 -5.6,26.6 -4.5,8 -10.9,14.9 -17.4,21.4 4.1,0.8 8.3,0.6 12.4,1.2 4.1,0.6 8.4,2.3 10.5,5.8 3.4,5.6 0.1,12.8 -3.5,18.2 -5.8,8.7 -14,17.7 -24.5,17.2 12.4,-16.9 33.9,-23.7 51.5,-35.1 13.5,-8.8 25,-20.8 33.3,-34.6 3.6,-6.1 6.8,-13.1 5.6,-20.1 -9.3021,-22.522978 -8.72235,31.643578 -9.7,38 -2.4,14.6 -8.9,28.1 -15.3,41.4 -1.7,3.5 -3.4,7.1 -6.3,9.7 -21.996339,32.8476 -24.324622,-7.01388 -8.6,-6.1 2.5,0.3 4.6,1.8 6.4,3.6 4.3,4.3 7.5,10 12.8,12.9 4.8,2.6 10.8,2.6 15.9,0.8 5.2,-1.8 9.7,-5.2 13.7,-8.9 14,-13.1 23,-31.3 25,-50.4 1.9,-19.1 -3.3,-38.7 -14.4,-54.4 -36.0255,-46.9750306 -113.66513,-25.470006 -137,6.7 -3.6,5.2 -5.1,11.6 -6.1,17.8 -1.3,8.1 -1.8,16.9 2.2,24.1 3.3,5.9 9.1,9.8 15,13.2 28.505405,25.14337 156.17688,40.97193 155.59281,-12.066013">
  <animate id="an1" attributeName="stroke-dashoffset" from="0" to="0" dur="5s" fill="freeze" calcMode="paced"/> 
  </path>
      <path id="wave" style="fill:none;stroke:white;stroke-miterlimit:10;" stroke-width="5" stroke-dasharray="0,0" stroke-dashoffset="0" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9
            c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9
            c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4">
   <animate id="an2" begin="an1.end" attributeName="stroke-dashoffset" from="175" to="0" dur="3s" fill="freeze" calcMode="paced"/> 
   </path>
</svg>

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

на последнем проэкте у меня было 20 иконок svg с большим количеством тегов, и для каждого писать id или и тд - это унылое дело — dmitriy, Feb 21 '17 at 20:22

score 2 · Answer 3 · edited Feb 17 '18 at 07:32

С одним тегом работает скрипт 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 &lt;= 0) {
                clearInterval(int);
            } else {
                path += 20 * (-1);
                line.style.strokeDashoffset = path;
            }
        }
    }

}
document.addEventListener("DOMContentLoaded", ready);

<button id="btn">click</button>
<svg version="1.1" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
            <path id="elem" style="fill:none;stroke:#2A2874;stroke-miterlimit:10;" d="M58.8,49.9c-8.5,24.3-8.9,50.7-15.4,75.7
            c-3.7,13.9-10.4,28.6-23.6,34.2c-4.2-9.4-0.4-20.3,3.5-29.8c8.8-21.4,18.4-42.8,32.1-61.5c6.2-8.5,14.7-17.1,25.3-16.8
            c1,0,2,0.1,2.8,0.6c1.5,0.9,2,2.7,2.3,4.4c1.5,9.1-1.1,18.5-5.6,26.6c-4.5,8-10.9,14.9-17.4,21.4c4.1,0.8,8.3,0.6,12.4,1.2
            s8.4,2.3,10.5,5.8c3.4,5.6,0.1,12.8-3.5,18.2c-5.8,8.7-14,17.7-24.5,17.2c12.4-16.9,33.9-23.7,51.5-35.1c13.5-8.8,25-20.8,33.3-34.6
            c3.6-6.1,6.8-13.1,5.6-20.1c-0.5-3.3-2.2-6.6-5.2-8c-4,14.9-2,30.8-4.5,46c-2.4,14.6-8.9,28.1-15.3,41.4c-1.7,3.5-3.4,7.1-6.3,9.7
            c-2.9,2.6-7.1,4.1-10.7,2.5c-1.9-0.8-3.5-2.7-3.4-4.7c0.2-2.5,3-4.2,5.5-3.9s4.6,1.8,6.4,3.6c4.3,4.3,7.5,10,12.8,12.9
            c4.8,2.6,10.8,2.6,15.9,0.8c5.2-1.8,9.7-5.2,13.7-8.9c14-13.1,23-31.3,25-50.4c1.9-19.1-3.3-38.7-14.4-54.4
            c-4.8-6.7-10.5-12.6-16.4-18.4c-3.5-3.5-7.1-7-11.5-9.2c-9.7-4.9-21.3-3-31.8-0.4c-19.3,4.8-38.2,11.3-56.3,19.6
            c-7.9,3.6-16.1,7.9-21,15.1c-3.6,5.2-5.1,11.6-6.1,17.8c-1.3,8.1-1.8,16.9,2.2,24.1c3.3,5.9,9.1,9.8,15,13.2
            c27.1,15.8,58.3,24.8,89.7,25.8c5,0.2,10.1,0.1,14.9-1.5c3.6-1.2,6.9-3.3,10.1-5.4c12.3-7.9,24.5-15.8,36.8-23.6
            c3.2-2.1,6.9-5.5,5.4-9"/>
        </svg>

Alexandr_TT · Answer 4 · 2017-02-20T20:02:09.430

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

 <svg  version="1.1" id="elem" class="elem" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200" height="200" viewBox="0 0 200 200" >
<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" >
        <animate 
          attributeName="offset" 
          from="0%"
          to="100%"
          begin="0s" dur="4s" repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
<rect width="100%" height="100%" fill="url(#grad1)" /> 
  <path style="fill:none;stroke:white;stroke-miterlimit:10;" stroke-width="3" stroke-dasharray="1243"  stroke-dashoffset="1243" d="M 58.8,49.9 C 50.3,74.2 49.9,100.6 43.4,125.6 39.7,139.5 33,154.2 19.8,159.8 15.6,150.4 19.4,139.5 23.3,130 32.1,108.6 41.7,87.2 55.4,68.5 61.6,60 70.1,51.4 80.7,51.7 c 1,0 2,0.1 2.8,0.6 1.5,0.9 2,2.7 2.3,4.4 1.5,9.1 -1.1,18.5 -5.6,26.6 -4.5,8 -10.9,14.9 -17.4,21.4 4.1,0.8 8.3,0.6 12.4,1.2 4.1,0.6 8.4,2.3 10.5,5.8 3.4,5.6 0.1,12.8 -3.5,18.2 -5.8,8.7 -14,17.7 -24.5,17.2 12.4,-16.9 33.9,-23.7 51.5,-35.1 13.5,-8.8 25,-20.8 33.3,-34.6 3.6,-6.1 6.8,-13.1 5.6,-20.1 -9.3021,-22.522978 -8.72235,31.643578 -9.7,38 -2.4,14.6 -8.9,28.1 -15.3,41.4 -1.7,3.5 -3.4,7.1 -6.3,9.7 -21.996339,32.8476 -24.324622,-7.01388 -8.6,-6.1 2.5,0.3 4.6,1.8 6.4,3.6 4.3,4.3 7.5,10 12.8,12.9 4.8,2.6 10.8,2.6 15.9,0.8 5.2,-1.8 9.7,-5.2 13.7,-8.9 14,-13.1 23,-31.3 25,-50.4 1.9,-19.1 -3.3,-38.7 -14.4,-54.4 -36.0255,-46.9750306 -113.66513,-25.470006 -137,6.7 -3.6,5.2 -5.1,11.6 -6.1,17.8 -1.3,8.1 -1.8,16.9 2.2,24.1 3.3,5.9 9.1,9.8 15,13.2 28.505405,25.14337 156.17688,40.97193 155.59281,-12.066013">
  <animate id="an1" attributeName="stroke-dashoffset" begin="0;an2.end" 
         values="1243; 0" dur="8s"  fill="freeze" calcMode="linear" restart="whenNotActive" />

</path>
 &lt;path style="fill:none;stroke:white;stroke-miterlimit:10;" stroke-width="5" stroke-dasharray="175"  stroke-dashoffset="175" d="M14.8,180.6c2.4-0.7,4.3-2.6,6.4-3.9
        c6.2-3.7,14.3-1.9,21,0.8s13.5,6.3,20.8,5.9c8.4-0.5,15.8-6.5,24.2-6.8c11.5-0.5,21.7,9.4,33.2,8.7c8.9-0.6,17.1-7.5,25.9-5.9
        c4.3,0.8,8.1,3.6,12.4,4.5c5.9,1.3,11.9-1.2,17.4-3.6c1.9-0.8,4.1-2.6,3.1-4.4"&gt;
&lt;animate id="an2" attributeName="stroke-dashoffset" begin="an1.end" 
     values="175; 0" dur="4s"    calcMode="linear" restart="whenNotActive" /&gt;     

</path>
</svg>

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

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

4 Answers4

Linked