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

#javascript #html5 #svg #svg_animation

Есть такая анимация в SVG:



setInterval(function() {
  console.log(document.getElementById('star_path').getBBox());
}, 200);





Как в реальном времени получать координаты анимированного шарика? 
Вот такой например код показывает постоянно одни и те же координаты.
    

Ответы

Ответ 1

Используйте 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;