title: How to animate an SVG element along a path from its last/current position (SMIL only, no CSS & no js)?
body: <p>I'm looking to animate a svg element along a path WITHOUT CSS  or Javascript, just with the SMIL. What I'm looking to do is:</p>
  
  <ol>
  <li>Play an animation on an element</li>
  <li>Get this element to stay in the final position when the animation end</li>
  <li>Start the next animation applied to this element FROM its current position</li>
  </ol>
  
  <p>I've been figuring out so far how to get to the point 2 by using &amp; setting the attribute <code>fill="freeze"</code> but I can't get to find a way to make it to my point 3... Each time, the element restart from its initial position.</p>
  
  <p>Here, a snippet to watch the desired effect (done with js there).
  I was wondering if it was actually possible just with SMIL ?
  And if so, what should I  explore to make it ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let animation = document.querySelector('#behavior_desired');
  
  animation.addEventListener('endEvent', () =&gt; {
    let circle=document.querySelector('#element_animated');
    let newCX = circle.cx.animVal.value + 180;
    let newCY = circle.cy.animVal.value + 35; 
    circle.setAttribute("cx", newCX);
    circle.setAttribute("cy", newCY);
    animation.setAttribute("fill", "remove");
  })
  
  animation.addEventListener('beginEvent', () =&gt; {
    animation.setAttribute("fill", "freeze");
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Element final position (after animation): INITIAL&lt;/h2&gt;
  &lt;svg preserveAspectRatio="xMidYMid meet" width="auto" height="auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" style="background-color: #0010ff3b;"&gt;
    &lt;path fill="none" stroke-linejoin="bevel" stroke="black" id="draw" d="m 100, 100 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
    &lt;circle r="25" stroke="black" stroke-width="3" fill="red" cx="100" cy="100"&gt;
      &lt;animateMotion dur="1s" fill="" begin="click"&gt;
        &lt;mpath xlink:href="#motionpath"&gt;&lt;/mpath&gt;
      &lt;/animateMotion&gt;
    &lt;/circle&gt;
    &lt;path fill="none" stroke-linejoin="bevel" id="motionpath" stroke="none" d="m 0, 0 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  
  &lt;h2&gt;Element final position (after animation): LAST FRAME&lt;/h2&gt;
  &lt;svg preserveAspectRatio="xMidYMid meet" width="auto" height="auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" style="background-color: #0010ff3b;"&gt;
    &lt;path fill="none" stroke-linejoin="bevel" stroke="black" id="draw2" d="m 100, 100 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
    &lt;circle r="25" stroke="black" stroke-width="3" fill="red" cx="100" cy="100"&gt;
      &lt;animateMotion dur="1s" fill="freeze" begin="click"&gt;
        &lt;mpath xlink:href="#motionpath2"&gt;&lt;/mpath&gt;
      &lt;/animateMotion&gt;
    &lt;/circle&gt;
    &lt;path fill="none" stroke-linejoin="bevel" id="motionpath2" stroke="none" d="m 0, 0 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  
  &lt;h2&gt;Desired behavior:&lt;/h2&gt;
  &lt;p&gt;After being animated, if we click on the element to re-launch the animation on it, I want that the animation starts with the element  at its current position&lt;/p&gt;
  &lt;svg preserveAspectRatio="xMidYMid meet" width="auto" height="auto" xmlns="http://www.w3.org/2000/svg" viewBox="-30 -30 800 400" style="background-color: #0010ff3b;"&gt;
    &lt;path fill="none" stroke-linejoin="bevel" stroke="black" id="draw3" d="m 0, 100 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
    &lt;path fill="none" stroke-linejoin="bevel" stroke="black" stroke-dasharray="5,5" id="draw4" d="m 180, 135 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
    &lt;path fill="none" stroke-linejoin="bevel" stroke="black" stroke-dasharray="2,2" id="draw5" d="m 360, 170 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
    &lt;path fill="none" stroke-linejoin="bevel" stroke="black" stroke-dasharray="1,1" id="draw5" d="m 540, 205 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
    &lt;circle id="element_animated" r="25" stroke="black" stroke-width="3" fill="red" cx="0" cy="100"&gt;
      &lt;animateMotion id="behavior_desired" dur="1s" fill="freeze" begin="click"&gt;
        &lt;mpath xlink:href="#motionpath3"&gt;&lt;/mpath&gt;
      &lt;/animateMotion&gt;
    &lt;/circle&gt;
    &lt;path fill="none" stroke-linejoin="bevel" id="motionpath3" stroke="none" d="m 0, 0 c 40,0 45,35 180,35"&gt;&lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>