html - 沿 SVG 路径为项目设置动画

Question

我对使用 SVG 不是很熟悉，我正在尝试为<path>线条制作动画：

以下是我想要实现的

最后的橙色圆圈应该沿着蓝线运行，但是我不知道如何在行尾获得循环（中间的红色块可以忽略，它是一个自定义图标）。

到目前为止，我有以下内容：

<svg width="192" height="160" xmlns="http://www.w3.org/2000/svg">
  <circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
    <animateMotion dur="1s" repeatCount="indefinite" rotate="auto" >
      <mpath xlink:href="#path"/>
    </animateMotion>
  </circle>
  <path id="path" d="M10 50 Q 95 150 180 120" stroke="red" stroke-width="2" fill="none"/>
</svg>

这是相同的codepen：https ://codepen.io/undert0w/pen/jOVVJMe

如何用循环延长蓝线并让橙色圆圈跟随蓝线？

（ps。如果有什么不同，我正在使用 Angular）

标签： htmlcssangularsvg

Answer 1

<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
    <mpath xlink:href="#path"/>
</animateMotion>
</circle>
<path id="path" d="M61,50c0,0,76,143,163,103S288-1,411,50s180,90,113,165s-203-16-207-53s163-99,154-30c0,0-14,55-30,55
    s-33.5-6.7-76-23s-29-87.1-76-23.6S224,229,177,213s-91,2-59-64s27-87,68-91s9,35,82,36s55,14,112-20S480-35,528,31s38,106,5,127
    s-43,50-27,62s45,19,45,19" stroke="red" stroke-width="2" fill="none"/>
</svg>

最简单的方法是在 Illustrator 中画出你想要的线条，然后将其保存为 SVG

之后只需单击：SVG Code 并获取 d="...." 之间的路径代码

！！记住！！调整 viewBox 区域

这是以这种方式完成的代码。

<svg width="600" height="800" xmlns="http://www.w3.org/2000/svg">
<circle class="circle" cx="0" cy=0 r=7 stroke=#f70202 stroke-width=2 fill=#f92020 >
<animateMotion dur="1s" repeatCount="indefinite" rotate="auto" >
    <mpath xlink:href="#path"/>
</animateMotion>
</circle>
<path id="path" d="M61,50c0,0,76,143,163,103S288-1,411,50s180,90,113,165s-203-16-207-53s163-99,154-30" stroke="red" stroke-width="2" fill="none"/>
</svg>