Search code examples
svgrotationsvg-animatesmilanimatetransform

SVG animateTransform toggle only working once


If you click two subsequent times on the rectangle, you see an animation toggling on and off:

<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
      <rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
        <animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
        <set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
        <set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
      </rect>
      <rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
        <animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
        <set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
        <set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
      </rect>
      <text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
        <tspan>Upper Title</tspan>
        <tspan class="project-name-span" x="17" dy="15">lower title</tspan>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
        </animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
        </animateTransform>
      </text>
    </svg>

I want that to work as many times as you may want, but it only works once; afterwards the rotation start point for the first click is for some reason shifted by -90 deg, as you'll notice from upon the 3rd click. Any ideas?

UPDATE

I noticed the following, if that may help to solve the problem (still unable to solve it): Try out the following with the snippet above:

A) Click on the rectangle once

B) Click on the rectangle again, to get the label back to its original position

C) Before clicking on the rectangle for the third time, copy the four animateTransform tags inside the text tag into a js variable let's say yourSavedAnimateTransformString, then delete them from the markup, e.g. via

document.getElementsByClassName("timeline-project-label")[0].innerHTML = 
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[0].outerHTML + 
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[1].outerHTML;

, then reinsert them at the exact same place with js, e.g. via

document.getElementsByClassName("timeline-project-label")[0].innerHTML += 
yourSavedAnimateTransformString

Then, click on the rectangle a third and a fourth time, and you'll see that it will work for the third and fourth time without refreshing the page, but fail again for subsequent clicks, unless you repeat this delete-re-insert procedure on every 2nd click on the rectangle, which is a rather hacky not-solution to me.

I supposed that this info may be useful to solve my problem, as it indicates that my problem's somehow related to an unaccessible tracked state of the present animateTransform tags, which can be eliminated by renewing these tags on every 2nd click. As this is not a real solution, I'd still really like to understand what's going on here..?

UPDATE 2

How come that the snippet above actually does not ainmate the transforms AT ALL in Safari?? According to the specs, animateTransform is supported for all except IE... (for which I'll use Fakesmile when done..)?

I've only noticed it now; you may check my problem in FF and Chrome, where the snippet behaves as described.

Doing it programmatically via document.getElementById("activate_project_10").beginElement() does actually work, but is this really necessary? Which is the standard approach for svg animatransforms in safari?


Solution

  • Okay, found a solution which works in FF and Chrome. The principal thought was to overwrite, after finishing the last animation of inactivate_project_10 animation, the state of the transform property with the initial value, before triggering the first one of the activate_project_10 animation. All this while thus using replace instead of sum as the value of additive for the last resetting animation, while using accumulate=sum to assure that the accumulated (thus actually the resetted) value is taken for the reset. And this actually worked:

    <svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
          <rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
            <animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
            <set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
            <set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
          </rect>
          <rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
            <animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
            <set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
            <set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
          </rect>
          <text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
            <tspan>Upper Title</tspan>
            <tspan class="project-name-span" x="17" dy="15">lower title</tspan>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
            </animateTransform>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
            </animateTransform>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="1" dur="0.01s" from="-90 17 121.2" to="-90 17 121.2" fill="freeze" additive="replace" accumulate="sum" begin="inactivate_project_10.end"></animateTransform>
          </text>
        </svg>

    The main modifications were:

    • changed the dur in the two main animateTransforms (inactivate_project_10 and activate_project_10) to the same time as the combined translation + rotation animations of 0.5s.

    • added the last animateTransform tag to reset the transform state to the initial state to be able to toggle the animation in an endless loop of clicking. Use a particularly short duration (0.01s used) to reset as fast as possible when finishing a toggle cycle, to quickly be ready for the next one, if triggered again.

    Yet, I'd still like to know why this is not working AT ALL in Safari..? Even if you use beginElement(), that only works for the first two toggles, and then stops working..