我正在寻找一种方法，可以像地铁地图那样在路径上沿路径移动元素。这是为了说明流程中的位置。任何对库或技术的指点都会受到赞赏。
sxlyya 回答：沿路径的一部分移动形状
要为地铁列车沿路径的移动进行动画处理，将使用animateMotion命令。
要创建运动路径，必须将运动图加载到矢量编辑器中
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 1000 945" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/0c7Aq.jpg " width="100%" height="100%" />
</svg>
然后在矢量编辑器中需要添加节点点
然后以* .svg格式保存文件，并将path公式复制到另一个文件
<!-- Train track -->
<path id="track" d="M55.2 119.6H911.7V397.1H294.5v460.1H911.7V626.5" style="fill:none;stroke-width:8;stroke:gray"/>
接下来，我们编写动画公式
<animateMotion
xlink:href="#train"
begin="svg1.click"
dur="14s"
fill="freeze">
<mpath xlink:href="#track" />
</animateMotion>
下面是完整的代码
点击后动画就会开始。
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="50%" height="50%" viewBox="0 55 1000 945" preserveAspectRatio="xMinYMin meet" Style="border:1px solid gray;">
<style>
.s1 {
fill:white;
stroke:gray;
stroke-width:8;
}
</style>
<!-- Train track -->
<path id="track" d="M55.2 119.6H911.7V397.1H294.5v460.1H911.7V626.5" style="fill:none;stroke-width:8;stroke:gray"/>
<!-- Metro stations -->
<ellipse cx="58" cy="119" rx="27" ry="27" class="s1"/>
<ellipse cy="118" cx="911" ry="27" rx="27" class="s1" />
<ellipse cy="398" cx="910.3" ry="26.2" rx="26.9" class="s1" />
<ellipse cy="397.8" cx="294.5" ry="26.2" rx="26.9" class="s1" />
<ellipse cy="858" cx="294.5" ry="26.2" rx="26.9" class="s1" />
<ellipse cy="858" cx="911.7" ry="26.2" rx="26.9" class="s1" />
<ellipse cx="910" cy="628" rx="45" ry="45" fill="yellowgreen" stroke="gray" stroke-width="8" />
<g id="train_start " >
<circle cx="58" cy="119" r="55" stroke="dodgerblue" fill="yellowgreen" />
<circle cx="58" cy="119" r="27" stroke="dodgerblue" fill="white" />
</g>
<g id="train" >
<circle cx="0" cy="0" r="55" stroke="dodgerblue" fill="dodgerblue" />
<circle cx="0" cy="0" r="27" stroke="dodgerblue" fill="white" />
</g>
<animateMotion
xlink:href="#train"
begin="svg1.click"
dur="8s"
fill="freeze"
repeatCount="indefinite">
<mpath xlink:href="#track" />
</animateMotion>
</svg>