Capture alterações no círculo do elemento SVG e altere os atributos em outro lugar via js

Question

Jun 20, 2013, 05:10 PM

Capture alterações no círculo do elemento SVG e altere os atributos em outro lugar via js

Eu tenho um SVG incorporado em um documento HTML. Um círculo (SVG) é animado usando<animate>. Eu estava tentando encontrar uma maneira de colocar algum tipo de ouvinte de evento nesse círculo apenas quando ele se move horizontalmente.

Ao ser movido (horizontalmente), gostaria de encontrar as coordenadas x da forma do círculo e definir uma terceira largura da forma retangular (externa) para a posição relativa do círculo. Esse terceiro retângulo seria como uma barra de progresso rastreando o progresso horizontal do círculo.

O círculo SVG (a propósito, o círculo está dentro de um grupo SVG g) sendo movido por gatilho algum tipo de evento eu posso definir um ouvinte para que então eu possa mudar o atributo de largura do tipo de barra de progresso?

Eu pensei que se o<animate> ou o elemento movido / alterado aciona algum tipo de evento que eu poderia tentar pegá-lo e depois alterar a largura na barra.

Descobri que não é muito bom usar um "independente" animado no recto, pois o ritmo de crescimento é muito diferente quando o círculo se move para cima. Eu não estou usando o elemento de tela porque estou tentando manter a escalabilidade e a semântica de formas. Preferiria uma solução de javascript, mas ficaria grato por outras abordagens.

EDIT depois de responder: O anser tem muito ben para a piint e (acho) útil. Eu sou muito novo no SVG e posso ter interpretado algo errado. Por essa razão estou incluindo código.

Eu tentei implementar suas recomendações e parece que não tive sucesso. .cx.animVal.value aplicado ao círculo não parece me dar o que eu preciso. Vou incluir uma versão picada do meu código, que deve mover uma bola ao longo de um caminho que está sendo movido horizontalmente; dois rects (inBar e outBar) devem estar acompanhando o deslocamento horizontal crescendo horizontalmente mais ou menos na mesma velocidade que a bola. Para ter certeza de que setInterval funciona e a posição está corretamente reunida, uma linha foi adicionada para listar oBall..animVal e oball..baseVal. No FF 21.0, não há alteração para o animVal ao longo do deslocamento. Eu entendi suas sugestões corretamente? aqui segue o código (incluindo cabeçalhos etc. como eu sou um noob no SVG em 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>

Se o código for executado, parece que animVal para o #ball em movimento permanece na mesma coordenada x (50), enquanto claramente ele está se movendo.