title: How to change the start point of svg animateMotion?
body: <p>I'm trying to change the start point of the animation which can be seen at <a href="https://codepen.io/anon/pen/vdmMOJ" rel="nofollow noreferrer">https://codepen.io/anon/pen/vdmMOJ</a>.</p>
  
  <p>The problem is how can i make the blue circle start from its own position instead it snapping to another position and then the animation starts.</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="500px" height="100%" viewBox="-500 -500 1500 1500"&gt;
    
    &lt;defs id="SvgjsDefs1225"&gt;&lt;/defs&gt;
    &lt;path id="SvgjsPath1226" d="
                      M 397.0000000000009, -60
                      m -348, 0
                      a 348,348 0 1, 0 696,0
                      a 348,348 0 1, 0 -696,0
                  " fill="none" stroke="#c9e3ff" stroke-width="12"&gt;&lt;/path&gt;
  
    &lt;g id="SvgjsG1234" class="circleFive"&gt;
        &lt;circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"&gt;&lt;/circle&gt;
        &lt;path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"&gt;&lt;/path&gt;
      
        &lt;animateMotion dur="4s" path="M181.50000762939544 -291.6000061035156M-166.49999237060456 -291.6000061035156A348 348 0 1 0 529.5000076293954 -291.6000061035156A348 348 0 1 0 -166.49999237060456 -291.6000061035156" begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"&gt;&lt;/animateMotion&gt;
        
   &lt;/g&gt;
        
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>