Capture los cambios en el círculo del elemento SVG y cambie los atributos en otro lugar a través de js
Tengo un SVG incrustado en un documento HTML. Un círculo (SVG) se anima usando<animate>. Estaba tratando de encontrar una manera de poner algún tipo de detector de eventos en ese círculo solo cuando se mueve horizontalmente.
Al moverme (horizontalmente), me gustaría encontrar las coordenadas x de la forma del círculo y establecer un tercer ancho de forma recta (exterior) en la posición relativa del círculo. Este tercer rect sería como una barra de progreso que sigue el progreso horizontal del círculo.
¿El círculo SVG (por cierto, el círculo está dentro de un grupo g de SVG) que se está moviendo al desencadenar algún tipo de evento puedo configurar un oyente para que luego pueda cambiar el atributo de ancho del tipo de barra de progreso?
He pensado que si bien el<animate> o el elemento movido / cambiado activa algún tipo de evento que podría intentar atraparlo y luego cambiar el ancho en la barra.
Descubrí que no es muy bueno usar un animado "independiente" en línea recta ya que el ritmo de crecimiento es muy diferente cuando el círculo se mueve hacia arriba. No estoy usando el elemento canvas porque estoy tratando de mantener la escalabilidad y la semántica de las formas. (Preferiría una solución javascript pero agradecería otros enfoques).
EDITAR después de la respuesta: el anser tiene mucho que ver con la pieza y (creo) útil. Soy muy nuevo en SVG y es posible que haya malinterpretado algo. Fot por eso estoy incluyendo código.
He intentado implementar sus recomendaciones y parece que no he tenido éxito. .cx.animVal.value aplicado al círculo no parece obtener lo que necesito. Incluiré una versión cortada de mi código que debería mover una bola a lo largo de un camino que se está moviendo horizontalmente; dos rects (inBar y outBar) deben seguir el desplazamiento horizontal creciendo horizontalmente más o menos al mismo ritmo que la bola. Para asegurarse de que setInterval funcione y la posición se haya recopilado correctamente, se ha agregado una línea a la lista oBall..animVal y oball..baseVal. En FF 21.0, no hay cambios para animVal a lo largo del desplazamiento. ¿He entendido tus sugerencias correctamente? Aquí sigue el código (incluidos los encabezados, etc., ya que soy un noob en SVG en particular):
<!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>
Si se ejecuta el código, parece que animVal para el #ball en movimiento permanece en la misma x-coordinat (50) mientras claramente se está moviendo.