Получение координат svg при анимации

Есть такая анимация в SVG
setInterval(function() { console.log(document.getElementById('star_path').getBBox()); }, 200);
Как в реальном времени получать координаты анимированного шарика? Вот такой например код показывает постоянно одни и те же координаты.

Ответ

Используйте getBoundClientRect, вместо getBBox(). Метод вернет объект с текущими координатами и размерами.
Возвращаемое значение — это объект TextRectangle, содержащий свойства только для чтения left, top, right и bottom, описывающие бокс с границами в пиксельном измерении. Значения top и left даются относительно верхнего левого угла порта просмотра.
const circle = document.getElementById('circle'); setInterval(function() { const {left, top} = circle.getBoundingClientRect(); console.log(`x: ${left}, y: ${top}`); }, 200);
NOTE:
left/top переменные - это значения верхнего левого угла, поэтому если вам нужно вычислить центр круга, тогда придется прибавить к этим координатам половину радиуса круга.
const circle = document.getElementById('circle'); setInterval(function() { const {left, top} = circle.getBoundingClientRect(); const circleR = parseFloat(circle.getAttribute('r')); const [circleX, circleY] = [left + circleR / 2, top + circleR / 2]; console.log(`x: ${circleX}, y: ${circleY}`); }, 200);
P.S.
const [circleX, circleY] = [left + circleR / 2, top + circleR / 2];
Это маленький хак, то же самое что и:
const circleX = left + circleR / 2; const circleY = top + circleR / 2;