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

Question

[Pulychuk]

На сайте есть множество svg иконок (например на каждой странице по 6-12 штук). Вставлены они через тег img. Нужно чтобы при наведении на блок svg иконка рандомно рисовалась. Думал использовать lazylinepainter однако там нужно каждый svg заносить в js код, это не совсем удобно будет. Возможно есть более простой путь сделать такую анимацию.

Comments

[Максим]

а что надо анимировать и при каком событие ??

Answer 1

[Сергей]

GSAP или Anime.js отлично подойдут для таких целей.

Answer 2

[Ольга Исакова]

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

Comments

[Pulychuk]

Спасибо, почти то что нужно было мне

Answer 3

[Олег]

svgjs.com
dmitrybaranovskiy.github.io/raphael

Answer 4

[Максим Тимофеев]

Вставлены они через тег img.

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

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

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