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

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

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

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

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

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

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head><title>Motion</title>
    <script>function beginAnim(anim,sPos){anim.beginElement();}</script>
    </head>
    <body>
    <div id="here">
    <button onclick="beginAnim(document.getElementById('anim'),'out');">START</button>
    </div>
    <div style="height:350px;">
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <script type="text/ecmascript">
    <![CDATA[
      function trckngBars(){
        oDiv=document.getElementById('here');
        var oBall=document.getElementById('ball');
        var oBar=[document.getElementById('inBar'),document.getElementById('outBar')];
        idTimer=self.setInterval(function(){updtBars(oBall,oBar);},100);
      }
      function updtBars(oBall,oBar){
        var xCoor=String(oBall.cx.animVal.value);
        oDiv.innerHTML+='==>'+oBall.cx.animVal.value+'..'+oBall.cx.baseVal.value;
        oBar[0].setAttribute("width",xCoor);
        oBar[1].setAttribute("width",xCoor);
      }
    // ]]>
    </script>
    <defs>
    <path id="throw" d="M0,0 q 80,-55 200,20" style="fill: none; stroke: blue;" />
    </defs>
    <g>
      <g>
        <rect x="2" y="50" width="400" height="110" style="fill: yellow; stroke: black;"></rect>
      </g>
      <g>
        <!-- show the path along which the circle will move -->
        <use id="throw_path" visibility="hidden" xlink:href="#throw" x="50" y="130" />
        <circle id="ball" cx="50" cy="130" r="10" style="fill: red; stroke: black;">
          <animateMotion id="ball_anim" begin="anim.begin+1s" dur="6s" fill="freeze" onbegin="trckngBars();" onend="window.clearInterval(idTimer);">
            <mpath xlink:href="#throw" />
          </animateMotion>
        </circle>
        <rect id="inBar" x="50" y="205" width="20" height="30" style="fill: purple;stroke-linecap: butt;">
    <!-- <animate attributeType="XML" attributeName="width" from="0" to="200" begin="ball_anim.begin" dur="6s" fill="freeze" /> -->
</rect>
      </g>
      <animateTransform id="anim" attributeType="XML" attributeName="transform" type="translate" from="0" to="200" begin="indefinite" dur="10s" fill="freeze" />
    </g>
    <rect id="outBar" x="50" y="235" width="10" height="30" style="fill: orange;stroke-linecap: butt;">
    <!-- <animate attributeType="XML" attributeName="width" from="0" to="400" begin="anim.begin+1s" dur="10s" fill="freeze" /> -->
</rect>
    </svg> 
    </div>
    </body>
    </html>

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

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

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