Какую библиотеку можно использовать для анимации SVG?

На сайте есть множество svg иконок (например на каждой странице по 6-12 штук). Вставлены они через тег img. Нужно чтобы при наведении на блок svg иконка рандомно рисовалась. Думал использовать lazylinepainter однако там нужно каждый svg заносить в js код, это не совсем удобно будет. Возможно есть более простой путь сделать такую анимацию.
  • Вопрос задан
  • 614 просмотров
Решения вопроса 1
@SergeiB
GSAP или Anime.js отлично подойдут для таких целей.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Raphael довольно старый, у Дмитрия Барановского есть новая библиотека: snapsvg.io/about
Но SVG в img, скорее всего, не анимирует ни одна библиотека, т.к. внутри img на SVG действуют только стили, прописанные внутри тега svg, и его не удастся затаргетить через img:hover.

Если не секрет, почему именно img? Если включить напрямую как svg, можно обойтись без целой отдельной библиотеки. Можно написать анимацию на ванильном CSS для path в иконке. Например, если <svg class="icon">:
.icon path {
  stroke-dasharray: 123123;
  stroke-dashoffset: 123123;
  animation: draw forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}


Вместо 123123 можно подобрать длину методом проб и ошибок, а можно измерить и задать через JS:

const path = Array.from(document.querySelectorAll(".icon path"));

let length = 0;

const ls = path.map(p => {
  length = p.getTotalLength();
  p.style.strokeDasharray = length;
  p.style.strokeDashoffset = length;
  return length;
});


Пример (где много лишнего:)) - https://codepen.io/penumbra1/pen/jaQqBb
Ответ написан
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Вставлены они через тег img.

Анимировать не получится, только каким-то адски странным способом, типа по url тянуть код и создавать копию, но уже в виде кода, все средствами js. Возможно и есть такая либа, но это странная затея.
6-12 - отлично можно в 1 svg запихнуть в defs и через use использовать, что бы html был читабельнее. и что бы в конце расположить.

Какую библиотеку можно использовать для анимации SVG?

любую, на вкус и цвет все фломастеры разные. Идеальной не находил. Каждая удобна в том или ином случае. Зависит от характера анимации. Вы бы описали. Но в любом случае лучше всего самому без библиотек. Я юзаю SMIL, но https://caniuse.com/#search=SMIL
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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