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

Я пытаюсь анимировать расширение линии.

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

Ниже мой код. Как вы можете видеть, я получаю длину пути и присваиваю strokeDashArray значение этой длины.
Это означает, что линия будет пунктирна, но пунктир заполняет всю строку.

Трюк заключается в уменьшении значения strokeDashoffset, потому что это определяет, где начинается тире.
Поэтому, если это также начинается с pathLength, линия будет полностью невидимой, и уменьшение значения покажет рисование линии.

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); 
}

Прим. переводчика

Я выбрал этот пост для перевода по двум причинам: так как часто встречал вопросы типа,- как с помощью JS вычислить длину линии и нарисовать её. Во-вторых мне показался интересен сам прием анимации штриховки с помощью JS. Данный прием, на мой взгляд может быть использован в интерактивном веб-дизайне. Например штриховка чекбоксов, вместо стандартных галочек и т.д.