沿 SVG 路径为项目设置动画答案

【问题标题】：Animate item along SVG path沿 SVG 路径为项目设置动画
【发布时间】：2021-05-16 02:46:28
【问题描述】：

我对使用 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>

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

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

（ps。如果有任何区别，我正在使用 Angular）

【问题讨论】：

标签： html css angular svg

【解决方案1】：

不确定我的问题是否正确。但是，如果您尝试使用蓝线创建循环路径。

尝试在任何 svg 编辑器中创建路径并复制源代码。

您可以从这段录音中清楚地了解。 https://youtu.be/vjLCAMaBr4A

【讨论】：

【解决方案2】：

<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>

【讨论】：