Изменить strokeDashoffset строки SVG в цикле for

Question

Я пытаюсь оживить линию, расширяющуюся. У меня уже есть это в css, но мне нужно сделать это в javaScript, потому что это единственный способ получить длину пути, который мне нужен. Я думаю, что я очень близко, но он не работает! Любые идеи?

Следующий мой код. Как вы можете видеть, я получаю длину пути и даю ему strokeDashArray этой длины. Это означает, что линия будет разбита, но тире заполняется вся строка. Хитрость заключается в уменьшении значения strokeDashoffset, потому что это определяет, где начинается тире. Поэтому, если это также начинается с pathLength, линия будет полностью невидимой, и уменьшение значения покажет путь.

Я знаю, что это возможно btw :) Как уже было сказано, у меня уже есть работа в css.

var element = document.getElementById("animpath"); 
var pathLength = element.getTotalLength(); 

element.style.strokeDasharray = pathLength; 
element.style.strokeDashoffset = pathLength; 

function animateRoute (e) 
{ 
e.style.strokeDashoffset = e.style.strokeDashoffset - 100; 
} 

for (i = 0; i < 100; i++) 
{ 
animateRoute(element); 
} 

Заранее благодарен!

Answer 1

Код:

function animateRoute (e) 
{ 
    e.style.strokeDashoffset = e.style.strokeDashoffset - 100; 
} 

for (i = 0; i < 100; i++) 
{ 
    animateRoute(element); 
} 

Это в основном эквивалентен

e.style.strokeDashoffset = e.style.strokeDashoffset - 10000; 

Поскольку кнуты цикла через все его итерации, не давая браузеру возможность обновить страницу.

Чтобы обойти это, сделайте один шаг в цикле, а затем вызовите setTimeout(), чтобы сообщить браузеру вернуться к нам немного, чтобы мы могли выполнить следующую итерацию.

var element = document.getElementById("animpath"); 
 
var pathLength = element.getTotalLength(); 
 

 
element.style.strokeDasharray = pathLength; 
 
element.style.strokeDashoffset = pathLength; 
 

 
function animateRoute(e, len) 
 
{ 
 
    // Each step we decrement the dash offset 
 
    len -= 10; 
 
    if (len < 0) 
 
    len = 0; // clamp to minimum 0 
 

 
    element.style.strokeDashoffset = len; 
 

 
    // We need to stop looping when the length gets to 0 
 
    if (len > 0) { 
 
    // Do another step 
 
    setTimeout(function() { animateRoute(e, len); }, 10); 
 
    } 
 
} 
 

 
animateRoute(element, pathLength);

<svg viewBox="-10 -10 420 120"> 
 
    
 
    <path id="animpath" d="M 0 0 L 400 10 0 20 400 30 0 40 400 50 0 60 400 70 0 80 400 90 0 100" 
 
      stroke="black" stroke-width="3" fill="none"/> 
 
    
 
</svg>