Задать вопрос
@ch-aqwer
javascript

Как анимировать svg path fill?

Добрый день! Подскажите пожалуйста как лучше анимировать svg path fill? Нужно чтобы линия плавно нарисовалась.
Типа так как работает stroke-dasharray.
Пример svg
<svg width="190" height="160" viewBox="0 0 90 60" fill="none"
           xmlns="http://www.w3.org/2000/svg">
        <path
          d="M8.71479 34.8585C6.76327 32.9048 3.59745 32.903 1.64372 34.8545C-0.31001 36.806 -0.311806 39.9719 1.63971 41.9256L8.71479 34.8585ZM28.7272 61.9687L25.1896 65.5022C26.1275 66.4412 27.4001 66.9687 28.7272 66.9687C30.0542 66.9687 31.3269 66.4412 32.2647 65.5022L28.7272 61.9687ZM88.4441 9.25911C90.3956 7.30538 90.3938 4.13956 88.4401 2.18805C86.4863 0.236534 83.3205 0.238329 81.369 2.19206L88.4441 9.25911ZM1.63971 41.9256L25.1896 65.5022L32.2647 58.4352L8.71479 34.8585L1.63971 41.9256ZM32.2647 65.5022L88.4441 9.25911L81.369 2.19206L25.1896 58.4352L32.2647 65.5022Z"
          fill="red" />
      </svg>


Буду благодарен за помощь.
  • Вопрос задан
  • 200 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
RAX7
@RAX7
Что бы работало как stroke-dasharray нужно рисовать эту линию обводкой (stroke). Есть еще вариант: использовать paht с заливкой (fill) как clipPath, для линии с обводкой и опять же эту обводку анимировать через stroke-dasharray.
Ответ написан
9 комментариев
9 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Расширение для браузера
24 нояб. 2024, в 01:24
500 руб./за проект
Ещё заказы