如何绘制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>