Блог

Я хочу анимировать круг вдоль и по пути svg (только сейчас я хочу переместить его на середину). У меня есть макет склада в svg, и я хочу отобразить положение тележки для каждой дорожки. Каждая дорожка-это путь, я пробовал этот код на JavaScript, но не могу получить правильную координату от объекта path:

     let udc = document.getElementById('UDC001');
    let curve = document.getElementById('TR0001');
    let totalLength = curve.getTotalLength();

    let path_transform = curve.getAttribute('transform');
    let u = 0.5;
    let p = curve.getPointAtLength(u * totalLength);

    udc.setAttribute('transform', `translate(${p.x},${p.y}) ${path_transform}`);
 

Если бы я попытался установить новый атрибут, мой круг не удалится, потому что позиция находится вне svg. Если я редактирую с помощью Inkscape, я вижу, что положение круга равно cx = 3052,2195 и cy = 267,8761, но с длиной точки доступа p.x = 1159,345 и p.y = 289,123.

Спасибо в адавансе