Анимировать стрелки по пути

Question

Я пытался создать анимацию со стрелками, следующими по пути.На самом деле, я хочу, чтобы мои стрелки двигались внутри моей зеленой полосы неопределенно.Код внизу показывает, что у меня есть на данный момент (обновлено)

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

То, что я пытался, это вручную изменять значения в каждой анимации.Я не нашел последовательного результата

Answer 1

Я бы использовал animateTransform в этом случае.Я надеюсь, что это то, что вам нужно, хотя я не очень уверен.

<svg viewBox="0 0 220 220">
  <defs>

  </defs>
   <g id="Groupe" data-name="Group" >
    <!-- 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="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="#f8f8f8"/>
      <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"/>
      <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"/>
      <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"/>
      <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"/>
    </g>
     <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"
    values="-562.599, 10.998;
            
            -431.051 -54.776">  
        
     </animateTransform>   
     </path>
</svg>