@bQ1

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

Есть такая 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
Хочу сделать анимацию заполнения полоски загрузки
  • Вопрос задан
  • 33 просмотра
Решения вопроса 2
LenovoId
@LenovoId
грёбнный короновирус
В представленном svg ни строчки о анимации ..
Должен быть тег animate
На stackoverflow : https://ru.stackoverflow.com/a/1085734/308951 я кучу раз делал этот эффект без js
Ответ написан
@bQ1 Автор вопроса
Нашел на 6 странице гугла) никогда так глубоко не залезал:

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы