SVG анимация для кривой пути

Question

У меня есть SVG и я хочу его оживить, и я новичок в анимации SVG.Поэтому я хочу, чтобы круг перемещался поверх изогнутого полуовала, медленно в течение 5 минут.Есть ли возможность анимировать с помощью CSS?До сих пор я нашел это краткое объяснение о пути кривой , но это не совсем то, чего я хочу, или я не понимаю, как реализовать свой код.Вот частичный код на codepen РЕДАКТИРОВАТЬ: мне нужно, чтобы точка двигалась точно поверх кривой линии.

.container{
  position: relative;
    margin: 15% auto;
    width: 300px;
    height: 400px;
    background-color: #212121;
    box-shadow: 0 29px 38px rgba(0,0,0,0.50),
                0 25px 22px rgba(0,0,0,0.30),
                inset 0 0 15px 5px rgb(227, 228, 229);
    border-radius: 15px;
    border: 2px solid;
    border-color: #9E9E9E;
}
.time-container{
  margin: 0 auto;
  width: 180px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 130px 50px rgb(132, 2, 2),
              0px 120px 70px rgb(99, 1, 1);
}
.time{
  font-size: 3rem;
  color : #D50000;
  letter-spacing: 3px;
}
.semi-oval{
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="time-container"><p class="time">5:00</p></div>
  <div class="semi-oval">
   <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="shadow">
         <feDropShadow dx="0" dy="10" stdDeviation="6"/>
       </filter>
     </defs>
     <path id="path" d="M10 80 Q 95 10 180 80" stroke="red" stroke-width="2" fill="none" filter="url(#shadow)"/>
     <circle class="circle" cx=15 cy=76 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 />
  </svg>
 </div>
</div>

Answer 1

Используйте элемент animationMotion для перемещения circle вдоль #path пути.Для получения дополнительной информации обратитесь к этим двум ссылкам.

1. MDN - animationMotion
2. CSS-трюки - руководство по анимации SVG

.container {
  position: relative;
  margin: 15% auto;
  width: 300px;
  height: 400px;
  background-color: #212121;
  box-shadow: 0 29px 38px rgba(0, 0, 0, 0.50), 0 25px 22px rgba(0, 0, 0, 0.30), inset 0 0 15px 5px rgb(227, 228, 229);
  border-radius: 15px;
  border: 2px solid;
  border-color: #9E9E9E;
}

.time-container {
  margin: 0 auto;
  width: 180px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0px 130px 50px rgb(132, 2, 2), 0px 120px 70px rgb(99, 1, 1);
}

.time {
  font-size: 3rem;
  color: #D50000;
  letter-spacing: 3px;
}

.semi-oval {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="time-container">
    <p class="time">5:00</p>
  </div>
  <div class="semi-oval">
    <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <filter id="shadow">
             <feDropShadow dx="0" dy="10" stdDeviation="6"/>
           </filter>
         </defs>
         <circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
             <animateMotion dur="100s" repeatCount="indefinite" rotate="auto" >
                 <mpath xlink:href="#path"/>
             </animateMotion>
         </circle>
         <path id="path" d="M10 80 Q 95 10 180 80" stroke="red" stroke-width="2" fill="none" filter="url(#shadow)"/>
      </svg>
  </div>
</div>

---

На данный момент продолжительность анимации составляет 100s, но вы можете изменить ее.

---

Обновить

AnimationMotion имеет атрибут с именем begin, который определяет, когда должна начинаться анимация.Вы можете использовать его, чтобы определить, когда круг должен начать двигаться вдоль кривой.Для получения дополнительной информации посетите эти две ссылки

1. MDN - начало
2. StackOverflow - задержка анимации SVG при каждом повторении