animateTransform verschiebt ein Objekt, obwohl die Anfangs- und Endwerte identisch sind

Question

Ich behalte einen Text (Klicken zum Wiederholen) unter dem SVG-Begrenzungsbereich, bis eine Animation endet. Ich benutze dann animateTransform, um den Text in die Mitte des Bildschirms zu bewegen. Wenn der Benutzer klickt, verwende ich eine andere animateTransform, um den Text unter den Bildschirm zu verschieben, bis die Animation endet. Unten sind die zwei animateTransforms. Beachten Sie, dass die Anfangs- und Endwerte von clickAniHide beide 0,0 sind, aber dies verschiebt den Text korrekt vom Bildschirm! Wenn ich diese animateTransform entferne, bewegt sich der Text nicht. Das Textobjekt befindet sich im Defs-Tag und wird von einem Tag referenziert. Das Textobjekt befindet sich nicht in einem Container, der es verschieben könnte.

Der Einfachheit halber poste ich nur die relevanten animateTransforms, um zu starten, aber ich werde mehr/den gesamten Code bei Bedarf posten. Vielen Dank!

<animateTransform 
    id="clickAniShow" 
    xlink:href="#rerun" 
    attributeType="XML" 
    attributeName="transform" 
    type="translate" 
    calcmode="discrete" 
    dur="0.1s" 
    begin="boxani2.end+0.75s;" 
    keyTimes="0; 1" 
    values="0, 0; 0, -350;" 
    fill="freeze" 
    /> 

    <animateTransform 
    id="clickAniHide" 
    xlink:href="#rerun" 
    attributeType="XML" 
    attributeName="transform" 
    type="translate" 
    calcmode="discrete" 
    dur="0.1s" 
    begin="restarter.click+0.2s;" 
    keyTimes="0; 1" 
    values="0,0; 0,0;" 
    fill="freeze" 
    /> 

Answer 1

Standardmäßig ersetzen die Werte in einer Animation alle vorherigen Werte, die das Attribut hatte.

• Für Ihre erste Animation, bei 0s wird transform(0,0) gesetzt, und bei 0,1 s, transform(0,-350) gesetzt ist und bleibt nach der fill="freeze" Regel.
• Für Ihre zweite Animation, 0s, transform(0,0) ist eingestellt, und bei 0.1s, transform(0,0) ist wieder eingestellt. Denken Sie daran, vor dieser Animation, aber nach dem ersten war es bei transform(0,-350).

Es gibt zwei zusätzliche rules Sie einstellen können:

• additive="sum": Wenn Ihr Textelement zum Beispiel ein transform="scale(...)" Attribut, bevor irgendwelche Animation beginnt hätte, würde die Animation nicht diesen Wert, ersetzen, sondern die bereits übersetzen skaliertes Element
• accumulate="sum": Wenn ein Element mehrere Animationen hat, beginnt eine Animation am Endzustand des vorherigen, genau wie Sie es hier erwartet haben.

Es sollte calcMode, nicht calcmode durch die Art und Weise sein.

In Bezug auf die Unterstützung von SMIL-Animationen unterstützen Edge und Internet Explorer keine SMIL-Animationen. Ab IE 10 können Sie stattdessen CSS animations verwenden. Ich kann nicht sofort erkennen, warum Sie ein Problem mit Firefox haben.