SVG动画无法在我的页面中正常工作

Question

我的Svg动画无法在我的页面中正常工作，预览效果不错，但在我的页面上不起作用。这是我的svg代码：

<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>

但是在我的页面（Chrome浏览器）中，笔触-破折号和丢失了，并且坐标不如我期望的那样在正确的位置上半部分，在我的下半部分很好。如下图所示：

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

我需要添加更多功能吗？请帮助我找出答案

谢谢