如何繪製svg路徑動畫

Question

我有3個發光blub和2個虛線加入他們。我必須通過從一個到另一個blub以重複的方式發出光線（像每個短劃線一個接一個地發光）到目前爲止，我能夠做到這一點。 https://jsfiddle.net/hsfxS/3856/ ..

<div class="mr-glow-1"> 
       <svg width="401" height="332" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
        <line stroke-dasharray="10, 5" x1="0" y1="1" x2="600" y2="600" style="stroke-width: 2px; stroke: rgb(0, 0, 0);"></line> 
       </svg> 
      </div> 

虛線實際上來自一個背景圖像。我只需要通過虛線來傳遞一個粉紅色的光線，表明正在發生從一個到另一個的轉換。我該如何實現這一目標？我正在使用angular 4，但可以通過純javascript來完成動畫。

Answer 1

您可以使用<animate>元素動畫X和Y位置的變化

https://codepen.io/danjiro/post/how-to-make-svg-loop-animation

<animate attributeName="cx" from="50" to="250" 
    dur="5s" repeatCount="indefinite" /> 

這樣就可以使一個發光的圓圈，並與動畫元素

動畫不斷變化的x和y位置

Answer 2

有很多方法可以做你想做的事。這一切都取決於你想要效果的外觀以及你想要的效果。

例如，這裏是一種方法。它動畫stroke-dashoffset沿着第二行移動一個小破折號，以便它看起來跟在第一行。

<svg width="401" height="332" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 
    <line stroke-dasharray="10, 5" x1="0" y1="1" x2="600" y2="600" style="stroke-width: 2px; stroke: rgb(0, 0, 0);"/> 
 
    <line stroke-dasharray="14, 1000" x1="0" y1="1" x2="600" y2="600" style="stroke-width: 8px; stroke: rgba(192, 64, 64, 0.5);"> 
 
    <animate attributeName="stroke-dashoffset" from="0" to="-848" dur="1s" repeatCount="indefinite" /> 
 
    </line> 
 
</svg>