Как заставить svg следовать по пути?

Question

Я пытаюсь заставить svg следовать по пути. Но кружок SVG просто остается на одном месте и не следует по пути.

.LineSvg {
  fill: none;
  stroke: $blue;
  position: absolute;
  margin-top: -2px;
  left: 700px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="0 0 1167.85 841.719" className={styles.LineSvg}>

  <path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" transform="translate(4767.054 2827.456)" />
  <circle cx="123.2" cy="646" r="11.7" fill="#63c6be" >

    <animateMotion
      dur="2.2s"
    />
    <mpath xlinkHref="#wire"></mpath>
    <animateMotion />
  </circle>
</svg>

Он должен начинаться с начала пути (линии) и двигаться к вершине линии.

Answer 1

В разметке есть ряд синтаксических ошибок, препятствующих анимации. Когда они исправлены, анимация происходит вне экрана, потому что преобразование пути игнорируется элементом mpath.

• Синтаксис зафиксирован ниже, и я настроил viewBox, чтобы анимация была видимой.
• Я удалил нефункциональное преобразование элемента path.
• Я также добавил fill = "freeze", иначе круг исчезнет в конце, так как смещение пути очень велико. .
• Наконец я увеличил круг, чтобы вы могли видеть его в увеличенном окне просмотра.

.LineSvg{
    fill: none;
    stroke: $blue;
    position: absolute;
    margin-top: -2px;
    left: 700px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="-5000 -3000 5000 5000" className={styles.LineSvg} >

          <path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" />
          <circle cx="123.2" cy="646" r="111.7" fill="#63c6be" >

            <animateMotion
              dur="2.2s" fill="freeze"
            >
            <mpath xlink:href="#wire"></mpath>
            </animateMotion>
          </circle>

        </svg>