@Alexander3928

Почему не работает stroke-dasharray, stroke-dashoffset svg?

Мне нужно сделать плавность отрисовки svg иконки. Задаю stroke-dashoffset и stroke-dasharray, но svg не как не меняется.

https://codepen.io/Alexxxsander/pen/XWYpbBK
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId Куратор тега SVG
I want, women not to get sick
Путь для подобной анимашки не должен иметь много точек а их достаточно ТРИ вот что я и сделал и для удобства выбрал квадратную форму самого SVG, делается это так:
<svg viewBox="0 0 400 400"></svg>
После этого наш svg станет квадратным по соотношению сторон
Позже зададим размер видимой области той в которой удобно будет рисовать и пока пусть будет опять width и height = 400px
и ставим точки на нашем канвасе - 1) M40,100 2) 200,390 3) 390,10 что и будет как раз калочка и для декорации я добавил stroke-linejoin и stroke-linecap это закругления на концах линии и на стыке и потом уже анимация

но Нам для этого надо узнать длину пути (path) и делается это на javascript методом: path.getTotalLength(); и выводим эту штуку в cansole.log

вызываем метод анимации а их два - анимация увеличения от 0 до длины пути + анимашка прозрачности, в сумме получаем вот это =>
если не успели увидить анимашку нажмите rerun в окне сниппета
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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