Html 为沿着路径的箭头设置动画

我一直在尝试创建一个箭头跟随路径的动画。事实上，我希望我的箭在我的绿带内不停地移动。下面的代码显示了我目前拥有的（已更新）

---

我尝试的是手动更改每个动画上的值。我没有找到一致的结果

在本例中，我将使用

animateTransform

。我希望这就是你需要的，尽管我不是很确定

我已经编辑了这个问题，我试图更清楚一些。对不起，我的英语很接近。这就是我的想法。我希望我所有的箭头都具有相同的行为/动画。我在上面。谢谢，我做得不对。当我尝试设置所有箭头的动画时，我无法使动画按我所希望的方式工作。我将编辑我的问题

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1300" height="700" viewBox="0 0 1300 700">
  <defs>

  </defs>
   <g id="Groupe" data-name="Group" transform="translate(512.109 319.792)">
    <!-- BC -->
      <path id="a" data-name="a" d="M3714.536-1433,3533-1342.232l21.048,10.524,181.536-90.768Z" transform="translate(-3533 1433)" fill="#00817a"/>
      <path id="b" data-name="b" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-562.599 10.998)" fill="#000">
      <animateTransform
        attributeType="XML" 
        attributeName="transform" 
        type="translate"
        dur="4s" 
        repeatCount="indefinite"
        begin="0s; click"
        values="-562.599, 10.998;

                -431.051 -54.776">      
     </animateTransform> 
     </path>
      <path id="c" data-name="c" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-536.289 -2.156)" fill="#000">
        <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-536.289, -2.156;

                  -457.361 -41.622">      
      </animateTransform> 
     </path>
      <path id="d" data-name="d" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-509.98 -15.311)" fill="#f8f8f8">
        <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-509.98, -15.311;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>
      <path id="e" data-name="e" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-483.67 -28.466)" fill="#f8f8f8">
      <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-483.67, -28.466;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>
      <path id="f" data-name="f" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-457.361 -41.621)" fill="#f8f8f8">
      <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-457.361, -41.621;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>
      <path id="g" data-name="g" d="M572,76.764,585.529,70l12.4,2.067,4.134,6.2-13.529,6.764-4.133-6.2Z" transform="translate(-431.051 -54.776)" fill="#f8f8f8">
      <animateTransform
          attributeType="XML" 
          attributeName="transform" 
          type="translate"
          dur="4s" 
          repeatCount="indefinite"
          begin="0s; click"
          values="-431.051, -54.776;

                  -431.051 -54.776">      
      </animateTransform> 
     </path>

    </g>
</svg>