CSS JS沿路径制作动画图像，然后制作破折号

Question

我想在路径上设置动画图像并显示对象的路径（例如，飞越地图的平面）。它应该看起来像这个图像：

但破折号应在物体到达位置后应用，因此破折号显示在物体后面。

我已多次尝试，但我只能做一次。破折号动画或飞机在路径上。有人知道解决方案。

Answer 1

1. 在虚线路径上为蒙版设置动画
2. 沿同一路径移动飞机
＆＃13;
＆＃13;
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" height="200" width="400">
  <defs>
    <path id="basePath" d="M 50,150 A 280 500 0 0 1 350,150" />
    <mask id="mask">
      <use xlink:href="#basePath" stroke-width="3" stroke="white"
           stroke-dasharray="1000,0" fill="none">
        <animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0"
            begin="0s" dur="5s" fill="freeze" />
      </use>
    </mask>
  </defs>
  <circle r="4" cx="50" cy="150" fill="grey" />
  <circle r="4" cx="350" cy="150" fill="grey" />
  <use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10"
       stroke="grey" fill="none" mask="url(#mask)"/>
  <path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z"
       fill="white" stroke="black" stroke-width="1.5">
    <animateMotion rotate="auto" begin="0s" dur="5s" fill="freeze">
      <mpath xlink:href="#basePath"/>
    </animateMotion>
  </path>
</svg>
＆＃13;
＆＃13;
＆＃13;

要做的主要是计算路径的长度，因此您可以为蒙版动画设置stroke-dasharray值，以便它们与动画平面保持同步。您可以使用

在Javascript中获得该长度

document.querySelector('#basePath').getTotalLength()