Fangen Sie Änderungen am SVG-Elementkreis ab und ändern Sie Attribute an anderer Stelle über js

Question

Jun 20, 2013, 05:10 PM

Fangen Sie Änderungen am SVG-Elementkreis ab und ändern Sie Attribute an anderer Stelle über js

Ich habe eine eingebettete SVG in einem HTML-Dokument. Ein (SVG-) Kreis wird mit animiert<animate>. Ich habe versucht, eine Möglichkeit zu finden, eine Art Ereignis-Listener nur dann in diesen Kreis einzufügen, wenn er sich horizontal bewegt.

Beim Bewegen (horizontal) möchte ich die x-Koordinaten der Kreisform ermitteln und eine dritte (äußere) Breite der geraden Form auf die relative Position des Kreises festlegen. Dieses dritte Rechteck wäre wie ein Fortschrittsbalken, der den horizontalen Fortschritt des Kreises verfolgt.

Wird der SVG-Kreis (der Kreis befindet sich übrigens innerhalb einer SVG-G-Gruppe) durch Auslösen eines Ereignisses verschoben, für das ich einen Listener festlegen kann, damit ich dann das width-Attribut der Art des Fortschrittsbalkens ändern kann?

Ich habe das gedacht, wenn entweder die<animate> oder das verschobene / geänderte Element löst eine Art Ereignis aus, bei dem ich versuchen könnte, es einzufangen und dann die Breite des Balkens zu ändern.

Ich habe festgestellt, dass es nicht gut ist, eine "unabhängige" Animation auf dem Rect zu verwenden, da das Wachstumstempo sehr unterschiedlich ist, wenn sich der Kreis nach oben bewegt. Ich benutze das Canvas-Element nicht, weil ich versuche, die Skalierbarkeit und die Formensemantik beizubehalten. (Ich würde lieber eine Javascript-Lösung bevorzugen, wäre aber für andere Ansätze dankbar.)

BEARBEITEN nach Antwort: Die Anser haben sich sehr um die Sache gekümmert und (glaube ich) geholfen. Ich bin sehr neu in SVG und ich kann etwas falsch interpretiert haben. Aus diesem Grund füge ich Code hinzu.

Ich habe versucht, Ihre Empfehlungen umzusetzen, und es scheint, dass ich erfolglos geblieben bin. .cx.animVal.value, der auf den Kreis angewendet wird, scheint mir nicht das zu bringen, was ich brauche. Ich werde eine gehackte Version meines Codes einfügen, die eine Kugel entlang eines Pfades bewegen soll, der selbst horizontal bewegt wird. Zwei Rechtecke (inBar und outBar) sollten die horizontale Verschiebung verfolgen, die horizontal ungefähr mit der gleichen Geschwindigkeit wie der Ball wächst. Um sicherzustellen, dass setInterval funktioniert und die Position korrekt erfasst wurde, wurde eine Linie hinzugefügt, um oBall..animVal und oball..baseVal aufzulisten. In FF 21.0 gibt es keine Änderung für animVal entlang der Verschiebung. Habe ich deine Vorschläge richtig verstanden? Hier folgen Sie dem Code (einschließlich Überschriften usw., da ich ein Noob in SVG im Besonderen bin):

    <!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>

Wenn der Code ausgeführt wird, scheint animVal für den sich bewegenden #ball an der gleichen x-Koordinate (50) zu bleiben, während er sich eindeutig bewegt.