title: How to efficiently reverse SVG (SMIL) Animation on Motion Path?
body: <p>I am trying to determine how to efficiently reverse this SVG animation (with SMIL) which uses <code>animateMotion</code> and the <code>d</code> attribute on the <code>path</code> element. I need the animation to run counterclockwise around the shape.</p>
  
  <p>The current animation can be found <a href="http://codepen.io/jjdewitt/pen/XJRqNK" rel="nofollow noreferrer">here</a> and the relevant code is as follows.</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>document.getElementById("svgobject").pauseAnimations();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve"&gt;
    &lt;g&gt;
      &lt;path fill="none" stroke="black"
            d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/&gt;
      &lt;rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)"&gt;
        &lt;animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"
          begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" /&gt;
      &lt;/rect&gt;
    &lt;/g&gt;
  
    &lt;!--start and stop animation--&gt;
    &lt;g onclick="document.getElementById('svgobject').unpauseAnimations()"
       transform="translate(160 100)"&gt;
      &lt;rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/&gt;
      &lt;text style="font: 16px Arial Black; fill: white; stroke: black;"
            transform="translate(2 20)"&gt;START&lt;/text&gt;
    &lt;/g&gt;
    &lt;g onclick="document.getElementById('svgobject').pauseAnimations()"
       transform="translate(260 100)"&gt;
      &lt;rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/&gt;
      &lt;text style="font: 16px Arial Black; fill: white; stroke: black;"
            transform="translate(5 20)"&gt;STOP&lt;/text&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I understand that I can manually reverse the SVG path data commands including moveto (M,m), lineto (L,l), curveto (C,c), etc.</p>
  
  <p>Given the amount of path coordinates that I'll need to reverse (in addition to those in this animation), I'm trying to determine if there is a more efficient way to do this.</p>