Поймать изменения в круге элемента SVG и изменить атрибуты в другом месте с помощью js

У меня есть встроенный SVG в документе HTML. Круг (SVG) анимируется с помощью, Я пытался найти способ поместить какого-то слушателя событий в этот круг, только когда он движется горизонтально.

После перемещения (горизонтально) яЯ хотел бы найти x-координаты формы круга и установить третью (внешнюю) ширину прямоугольной формы относительно относительной позиции круга. Этот третий прямоугольник будет похож на индикатор выполнения, отслеживающий горизонтальное продвижение круга.

Перемещает ли кружок SVG (кстати, круг внутри g-группы SVG) триггер, какое-то событие, которое я могу установить слушателем, чтобы затем я мог изменить атрибут ширины в виде индикатора выполнения?

Я думал, что если либо или перемещенный / измененный элемент вызывает какое-то событие, которое я мог бы попытаться поймать, а затем изменить ширину на панели.

Я обнаружил, что это не очень хорошо использовать "независимый» одушевьте прямоугольник, поскольку темпы роста сильно отличаются, когда круг движется вверх. Я не использую элемент canvas, потому что я пытаюсь сохранить масштабируемость и семантику форм. (Я бы предпочел решение javascript, но я был бы благодарен за другие подходы.)

РЕДАКТИРОВАТЬ после ответа: Anser очень много сделал для piint и (я думаю) полезно. Я очень новичок в SVG и, возможно, что-то неправильно истолковал. По этой причине я включаю код.

Я пытался выполнить ваши рекомендации, и мне, похоже, не удалось. .cx.animVal.value, примененное к кругу, похоже, не дает мне то, что мне нужно. Я включу расколотую версию моего кода, которая должна перемещать шар по траектории, которая сама перемещается горизонтально; две линии (inBar и outBar) должны отслеживать горизонтальное смещение, растущее по горизонтали более или менее с той же скоростью, что и мяч. Чтобы убедиться, что setInterval работает и позиция собрана правильно, была добавлена строка в список oBall..animVal и oball..baseVal. В FF 21.0 нет никаких изменений для animVal вдоль смещения. Правильно ли я понял ваши предложения? здесь следуйте коду (включая заголовки и т. д., поскольку я нуб в SVG в частности):

    
    
    Motion
    function beginAnim(anim,sPos){anim.beginElement();}
    
    
    
    START
    
    
    
    
    
    
    
    
    
    
      
        
      
      
        
        
        
          
            
          
        
        
    

      
      
    
    
    

     
    
    
    

Если код запускается, кажется, что animVal для движущегося #ball остается в том же x-координатном (50), пока он явно движется.

Ответы на вопрос(3)

Ваш ответ на вопрос