title: Svg alternate animateMotion
body: <p>I want to have repeating alternate direction for the animation</p>
  <pre><code>&lt;animateMotion keyPoints=&quot;0;1;0&quot; keyTimes=&quot;0;0.5;1&quot; dur=&quot;6s&quot; repeatCount=&quot;indefinite&quot; rotate=&quot;auto&quot; &gt;
    &lt;mpath href=&quot;#path1&quot;/&gt;
  &lt;/animateMotion&gt;
  </code></pre>
  <p><code>Keypoints</code> and <code>KeyTimes</code> are not working</p>
  <p>Full 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 width="200" height="200" viewBox="0 0 700 700"&gt;
    &lt;g&gt;
        &lt;path id="path1" d="M200,350 C 200,440 400,150 400,250 M200,350"
              fill="none" stroke="blue" stroke-width="7.06"  /&gt;
  
        &lt;path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
              fill="yellow" stroke="red" stroke-width="7.06"  /&gt;
  
          &lt;animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" &gt;
            &lt;mpath href="#path1"/&gt;
          &lt;/animateMotion&gt;
    &lt;/g&gt;     
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>