Можно ли на чисто javascript проложить маршрут для элемента через path?

Question

[madc0de]

Есть свг в котором путь/маршрут построен через path d
И уже какой день не могу понять как просто и без заморочек и convas сделать, чтобы по нему следовал нужный мне элемент. Прошу помощи ибо в сети нету решений, либо сложные или не понятные

Пример: Есть svg path кривая, с помощью svg.getTotalLength() получаю его длину 6000 и это 100%
И например мне нужно переместить объект на 20%, то есть элемент должен отступить на 1200 пикселей по пути
Сам svg имеет viewbox 0 0 1920 8900
а разрешение на котором тестирую 1222

var svg = document.querySelector('.teams')
var x = svg.getPointAtLength(1200).x;
var y = svg.getPointAtLength(1200).y;

document.querySelector('.star').setAttribute('y', y)
document.querySelector('.star').setAttribute('x', x)

Получаю х - 1570, а y - 6100
значения получаются какие то адски большие при условии что родительский элемент данной svg 1222х4600

Как можно сделать простую отрисовку элемента на маршруте задав нужную переменную?
Может есть библиотеки с примерами. Пробовал и motion.js и все пытаются элемент через обычный transform относительно всей страницы позиционировать, когда как сам маршрут я отдает огромные значения, так подозреваю из-за viewbox. А что даст если в convas обернуть и как это будет выглядеть. Просьба помочь, руки опускаются, но задача интересная

Comments

[RAX7]

Сам svg имеет viewbox 0 0 1920 8900
Получаю х - 1570, а y - 6100

это координаты относительно viewbox и значит у тебя path нарисован снизу вверх
Если хочешь перевести в экранные координаты, то тогда делай так

Может есть библиотеки с примерами.

https://animejs.com/documentation/#motionPath

[madc0de]

RAX7, аниме работает, но не подходит, там же анимация, а мне нужно объект появлялся на отрезке пути относительно процента и таких путей будет 10, тем самым 10 объектов нужно разместить.

Но теперь встал вопрос, как переводить координаты svg в экранные, как это делает anime. Ибо по ссылке, координаты экрана рассчитываются от координат клика я так понял.

В идеале хотелось бы подобную функцию

function moveObj(prcnt){
    var path = document.getElementById('path')
    var obj = document.getElementById('obj');
    var pathLength = Math.floor( path.getTotalLength() );
    prcnt = (prcnt*pathLength) / 100;

  pt = path.getPointAtLength(prcnt);
  pt.x = Math.round(pt.x);
  pt.y = Math.round(pt.y);
  
  obj.style.webkitTransform = 'translate3d('+pt.x+'px,'+pt.y+'px, 0)';
}

moveObj(50);

Сейчас она правильно ставит объект, только если разрешение самого svg равно viewBox. Но при адаптивном свг = 1000, объект улетает

[RAX7]

madc0de, попробуй так

[madc0de]

RAX7, тоже накидывал примеры, получился грубее конечно

function move(prcnt){
  var path = document.getElementById('team7'),
      svg = document.querySelector('.svg'),
      pathLength = Math.floor( path.getTotalLength() ),x,y;
  prcnt = (prcnt*pathLength) / 100;
  pt = path.getPointAtLength(prcnt);
  pt.x = Math.round(pt.x);
  pt.y = Math.round(pt.y);
  
  x = pt.x * (svg.offsetWidth / svg.viewBox.baseVal.width),
  y = pt.y * (svg.offsetHeight / svg.viewBox.baseVal.height)

  document.getElementById('obj').style.webkitTransform = 'translate('+x+'px,'+y+'px)';
}
move(100)

Буду использовать ваш, но хотя бы разобрался) Спасибо большое

Не сочтите за наглость, но как сюда втиснуть rotate ? что прямоугольный объект следовал по линии?

[RAX7]

madc0de, обновил пэн, добавил вращение. Сделано также как и в anime.js https://github.com/juliangarnier/anime/blob/master... Если что можешь от туда еще нужные фичи стащить.

[madc0de]

RAX7, огромное спасибо за помощь и ссылку на кучу полезных функций. Благодаря Вам, разобрался!!!

[RAX7]

madc0de, пожалуйста =)