title: SVG animateTransform toggle only working once
body: <p>If you click two subsequent times on the rectangle, you see an animation toggling on and off:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container"&gt;
        &lt;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"&gt;
          &lt;animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.01s"&gt;&lt;/animateTransform&gt;
          &lt;set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"&gt;&lt;/set&gt;
          &lt;set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"&gt;&lt;/set&gt;
        &lt;/rect&gt;
        &lt;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"&gt;
          &lt;animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.01s"&gt;&lt;/animateTransform&gt;
          &lt;set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"&gt;&lt;/set&gt;
          &lt;set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"&gt;&lt;/set&gt;
        &lt;/rect&gt;
        &lt;text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point"&gt;
          &lt;tspan&gt;Upper Title&lt;/tspan&gt;
          &lt;tspan class="project-name-span" x="17" dy="15"&gt;lower title&lt;/tspan&gt;
          &lt;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"&gt;
          &lt;/animateTransform&gt;
          &lt;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"&gt;&lt;/animateTransform&gt;
          &lt;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"&gt;&lt;/animateTransform&gt;
          &lt;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"&gt;
          &lt;/animateTransform&gt;
        &lt;/text&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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?</p>
  <p><em><strong>UPDATE</strong></em></p>
  <p>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:</p>
  <p>A) Click on the rectangle once</p>
  <p>B) Click on the rectangle again, to get the label back to its original position</p>
  <p>C) Before clicking on the rectangle for the third time, copy the four <code>animateTransform</code> tags inside the <code>text</code> tag into a js variable let's say <code>yourSavedAnimateTransformString</code>, then delete them from the markup, e.g. via</p>
  <pre><code>document.getElementsByClassName(&quot;timeline-project-label&quot;)[0].innerHTML = 
  document.getElementsByClassName(&quot;timeline-project-label&quot;)[0]
  .childNodes[0].outerHTML + 
  document.getElementsByClassName(&quot;timeline-project-label&quot;)[0]
  .childNodes[1].outerHTML;
  </code></pre>
  <p>, then reinsert them at the exact same place with js, e.g. via</p>
  <pre><code>document.getElementsByClassName(&quot;timeline-project-label&quot;)[0].innerHTML += 
  yourSavedAnimateTransformString
  </code></pre>
  <p>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.</p>
  <p>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 <code>animateTransform</code> 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..?</p>
  <p><em><strong>UPDATE 2</strong></em></p>
  <p>How come that the snippet above actually does not ainmate the transforms AT ALL in Safari?? According to the specs, <code>animateTransform</code> is supported for all except IE... (for which I'll use Fakesmile when done..)?</p>
  <p>I've only noticed it now; you may check my problem in FF and Chrome, where the snippet behaves as described.</p>
  <p>Doing it programmatically via <code>document.getElementById(&quot;activate_project_10&quot;).beginElement()</code> does actually work, but is this really necessary? Which is the standard approach for svg animatransforms in safari?</p>