Почему не изменяется stroke-dashoffset?

Question

[bQ1]

Есть такая svg:

<svg class="scheme-timeline__svg" viewBox="0 0 1172 403" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="scheme-timeline__svg-static" d="M32.5 1H1070.5L1171 61.5V202H1070.5H101L1 262V402H618.5" stroke="#B3CADA" stroke-width="2" stroke-dasharray="4.5 3.3"/>
    <path class="scheme-timeline__svg-animatable" d="M32.5 1H1070.5L1171 61.5V202H1070.5H101L1 262V402H618.5" stroke="#4B9B2D" stroke-width="4"/>
</svg>

Две одинаковые полосы одна поверх другой. Св-во stroke-dashoffset никак не влияет на путь с классом scheme-timeline__svg-animatable
Хочу сделать анимацию заполнения полоски загрузки

Answer 1

[Максим]

В представленном svg ни строчки о анимации ..
Должен быть тег animate
На stackoverflow : https://ru.stackoverflow.com/a/1085734/308951 я кучу раз делал этот эффект без js

Comments

[bQ1]

Ну изменения свойства stroke-dashoffset через js должно же как то влиять не?

[Максим]

bQ1, не обязательно

Answer 2

[bQ1]

Нашел на 6 странице гугла) никогда так глубоко не залезал:

"SVG-линии при помощи CSS также можно заставить двигаться. Если значения stroke-dashoffset и stroke-dasharray равны и совпадают с длинной линии, то видимый конец линии можно заставить двигаться. Анимировать линию можно, изменяя во времени значение stroke-dashoffset до 0"