Svg animation not working as expect in my page

Question

My Svg animation not working as my expectation in my page,The preview looks good, but it not work on my page. here is my svg code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="450" width="450" margin-top="20px">
       
        <image x="0" y="0" width="450" height="450" xlink:href="https://test.creapowa.com/ke/data/User/Minty/home/desktop/Elastic/img/roundtripplain.svg"></image>
  <defs>
    <path id="basePath" d="M 120,150 A 280 500 0 0 1 320,145 L320 145 360 150 "></path>
    <mask id="mask">
      <use xlink:href="#basePath" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
        <animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
      </use>
    </mask>
  </defs>
  <circle r="4" cx="120" cy="150" fill="#c86706"></circle>

  <circle fill="#c86706" cy="150" cx="360" r="4"></circle>
  
  <use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask)"></use>
  <path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
    <animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
      <mpath xlink:href="#basePath"></mpath>
    </animatemotion>
  </path>  
  

   <defs>
    <path id="basePath1" d="M 330,330 A 500 1500 0 0 1 120,330"></path>
    <mask id="mask1">
      <use xlink:href="#basePath1" stroke-width="3" stroke="white" stroke-dasharray="1000,0" fill="none">
        <animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite"></animate>
      </use>
     </mask>
  </defs>
  <circle r="4" cx="120" cy="330" fill="#c86706"></circle>
  <circle fill="#c86706" cy="330" cx="330" r="4"></circle>
  <use xlink:href="#basePath1" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask1)"></use>
  <path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z" fill="#fef1ba" stroke="black" stroke-width="1.5">
    <animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
      <mpath xlink:href="#basePath1"></mpath>
    </animatemotion>
  </path>
</svg>

But in my page( Chrome browser ), The stroke-dasharray and are missing and the coordinate isn't in the right place as my expectation in the upper part, its good in the lower part. like image below:

Stroke-dash are missing in the top part and coordinate is not in the right place

Did i need to add more function? Please help me to figure out,

Thank you,