rotate

<svg
  width="400"
  height="120"
  viewBox="0 0 480 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- 移動経路の輪郭を灰色で描画 -->
  <path
    d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
    stroke="lightgrey"
    stroke-width="2"
    fill="none"
    id="theMotionPath" />

  <!-- 赤い矢印は回転しない -->
  <path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z">
    <!-- 移動経路のアニメーションを定義 -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="0">
      <mpath href="#theMotionPath" />
    </animateMotion>
  </path>

  <g transform="translate(100, 0)">
    <use href="#theMotionPath" />
    <!-- 緑の矢印は移動経路に沿って回転 -->
    <path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- 移動経路のアニメーションを定義 -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>

  <g transform="translate(200, 0)">
    <use href="#theMotionPath" />
    <!-- 青の矢印は移動経路に沿って逆向きに回転 -->
    <path fill="blue" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- 移動経路のアニメーションを定義 -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>

  <g transform="translate(300, 0)">
    <use href="#theMotionPath" />
    <!-- 紫の矢印は 210 度の向きに固定 -->
    <path fill="purple" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- 移動経路のアニメーションを定義 -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="210">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>
</svg>