title: Facing problem while trying trying to rotate SVG animation
body: <p>I'm a beginner in animation. I am trying to learn svg animation from the following piece of code.</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 xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200"&gt;
           
  &lt;path stroke="black" fill="none" d="M70,85H125V140H70V85Z" &gt;&lt;/path&gt;
              
  &lt;path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;"&gt;                              
  &lt;animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto"  repeatCount="indefinite"&gt;&lt;/animateMotion&gt;
  &lt;/path&gt; 
    
  &lt;g&gt; 
    &lt;desc&gt;white mask&lt;/desc&gt;
  &lt;rect x="90" y="80" width="15" height="65" fill="white"  /&gt;
  &lt;rect x="65" y="105" width="65" height="15" fill="white" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm tring to move the arrow to rotate in opposite direction (i.e anticlockwise) but unable to achieve that. I have tried to change the path but I'm stuck at this point.
  Any help will be appreciated.</p>