CSS JS沿路径动画图像并在之后制作破折号

Question

我想为路径上的图像设置动画并显示对象的路线（例如飞机飞过地图）。它应该看起来像这张图片：

但是破折号应该在对象到达位置后应用，所以破折号显示在对象之后。

我已经尝试了很多次，但我只能做一次。路径上的破折号动画或平面。有人知道解决办法吗。

Answer 1

1. 在虚线路径上设置蒙版动画
2. 沿着相同的路径移动平面

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

要做的主要事情是计算路径的长度，因此您可以设置遮罩动画的stroke-dasharray 值，以便它们与动画平面保持同步。您可以在 Javascript 中获得该长度

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