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