@madc0de

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

Есть свг в котором путь/маршрут построен через 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 обернуть и как это будет выглядеть. Просьба помочь, руки опускаются, но задача интересная
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
грёбнный короновирус
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
09 апр. 2020, в 02:02
3000 руб./за проект
09 апр. 2020, в 01:55
1500 руб./за проект
09 апр. 2020, в 01:27
1000 руб./за проект