Пару вопросов по snap.svg.js, как делаются анимации?

Question

[Nikita-Fast]

Изучаю snap.svg.js для примера решил анимировать простой path нарисовал path в Corel и взял от туда координаты

<svg id="svg"></svg>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
  <script>
    var s = Snap("#svg").attr({
	  width: 400,
	  height: 400
	});
	var p = s.path("m211.11 29.443c-7.8773 42.532-81.838 36.114-75.778 65.304 33.47 161.2-55.536 118.87-89.008 59.191").attr({
	  fill:"none",
	  stroke: "#000",
	  strokeWidth: 3
	});
  </script>

Всё прекрасно отрисовалось в браузере но вопрос в том как теперь или что надо написать ?
В оф доках ни чего не понял !

"m211.11 29.443c-7.8773 42.532-29.974 91.538-23.913 120.73 6.1614 29.676-118.95-77.715-119.98-60.673-4.5613 75.534 6.4136 113.13-20.897 64.44"

так выглядит конечный path , как мне его изменить анимированно ?

Answer 1

[0xD34F]

метод animate, например

Comments

[Nikita-Fast]

а как сделать тоже самое но по hover или по mouse.... ?

[0xD34F]

Nikita-Fast, ваш path доступен как p.node - можете цеплять к нему обработчики событий.

UPD. Посмотрел документацию, сам элемент тоже имеет методы для подключения обработчиков событий - лучше использовать их - click, mouseover и т.д.

[Nikita-Fast]

0xD34F, то типа

s.onmouseenter({
p.animate({
  d: "m211.11 29.443c-7.8773 42.532-29.974 91.538-23.913 120.73 6.1614 29.676-118.95-77.715-119.98-60.673-4.5613 75.534 6.4136 113.13-20.897 64.44"
}, 10000)
})

так ??

[0xD34F]

Nikita-Fast, нет.

s.mouseover(function() {
  p.animate({
    d: "m211.11 29.443c-7.8773 42.532-29.974 91.538-23.913 120.73 6.1614 29.676-118.95-77.715-119.98-60.673-4.5613 75.534 6.4136 113.13-20.897 64.44"
  }, 10000)
})

[Nikita-Fast]

0xD34F, очень ценная информация - спасибо