Всем доброго дня! Пытаюсь анимировать svg, пока пробую с помощью библиотеки anime.js, вроде что-то получается, но не знаю с какой стороны подойти к решению следующего вопроса:
в свг у меня есть путь <path /> и к нему маска с
id="mask-path" которые представляют собой пунктирную линию (проще говоря - схема маршрута, извилистая пунктирная линия)
и в свг есть картинка
<defs>
<image id="image0_129_31" width="800" height="800" xlink:href="images/man.png"></image>
</defs>
которая стоит как бы в начале маршрута
реально ли с помощью этой библиотеки (или какой то другой) заставить картинку двигаться по линии маршрута?
Сам код svg и там еще пробный скрипт это я тестировал анимацию заливки пунктира (вроде как то даже работает, цель был проверить вообще работоспособность библиотеки для начала)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anime.js</title>
</head>
<body>
<main>
<section class="root">
<svg width="1229" height="922" viewBox="0 0 1229 922" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
<g clip-path="url(#clip0_129_31)">
<rect width="1229" height="922" fill="white" />
<defs>
<mask id="anim-mask">
<path id="mask-path"
d="M1148.68 150.5L962.471 150.5L892.249 150.5L831.001 150.5L811.832 150.5C750.729 150.5 705.587 206.926 718.908 266.649V266.649C735.264 339.974 664.951 402.306 594.054 377.333L517.338 350.31C480.398 337.299 439.552 351.818 419.334 385.147V385.147C393.808 427.227 410.629 482.383 455.402 503.418L636.501 588.5V588.5C780.607 661.377 736.547 877.418 575.772 886.278L480.999 891.5L101.499 891.5"
fill="none" stroke="#ff0000" stroke-width="3" />
</mask>
</defs>
<path
d="M1148.68 150.5L962.471 150.5L892.249 150.5L831.001 150.5L811.832 150.5C750.729 150.5 705.587 206.926 718.908 266.649V266.649C735.264 339.974 664.951 402.306 594.054 377.333L517.338 350.31C480.398 337.299 439.552 351.818 419.334 385.147V385.147C393.808 427.227 410.629 482.383 455.402 503.418L636.501 588.5V588.5C780.607 661.377 736.547 877.418 575.772 886.278L480.999 891.5L101.499 891.5"
fill="none" stroke="black" stroke-width="3" stroke-dasharray="10 5" mask="url(#anim-mask)" />
</g>
<defs>
<image id="image0_129_31" width="800" height="800" xlink:href="images/man.png"></image>
</defs>
</svg>
</section>
</main>
<script>
anime({
targets: '#mask-path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 3000,
direction: 'alternate',
loop: false
})
</script>
</body>
</html>
