曲线路径的 Svg 动画

Question

我有一个 SVG 并想对其进行动画处理，但我是 SVG 动画的新手。所以我希望圆圈在弯曲的半椭圆形顶部移动，在 5 分钟内慢慢移动。是否可以使用 CSS 制作动画？ 到目前为止，我找到了这个简短的解释about curve path，但这并不是我想要的，或者我不明白如何实现我的代码。 这是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 元素沿#path 路径移动circle。有关详细信息，请参阅这两个链接。

1. MDN - animationMotion
2. CSS-tricks - A Guide to SVG Animations

.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 - begin
2. StackOverflow - SVG animation delay on each repetition