SVG: как высчитать stroke-dasharray и stroke-dashoffset для анимации обводки?

Question

[virtualhero]

Не могу понять как высчитать правильно точное число в свойствах stroke-dashoffset и stroke-dasharray.

Вот к примеру простые svg анмации: codepen.io/kyledws/pen/Gvelt
Тут у класса .outer в свойстве stroke-dasharray стоит значение 534, если изменить в процентах или на другое число то уже не будет того эффекта. То есть я не понимаю как мне высчитать точное число, которое нужно для анимации заполнения обводки от начала и до конца, только руками на глаз в высчитывать получается, но по мне это глупо. я не могу на 100% бахнуть, так как обводка по разному заполнятся, вообще жесть какая-то(((

Answer 1

[call007]

Вдруг поможет...

var path = document.querySelector('.squiggle-container path');
console.log(path.getTotalLength());

Ссылка на пруф