如何绘制svg路径动画答案

【问题标题】：how to draw svg path animation如何绘制svg路径动画
【发布时间】：2017-10-18 21:06:27
【问题描述】：

我有 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 制作动画。

【问题讨论】：

新小提琴链接jsfiddle.net/hsfxS/3857

标签： javascript animation svg css-animations

【解决方案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" />

因此，您可以制作一个发光的圆圈，并使用 animate 元素为其变化的 x 和 y 位置设置动画

【讨论】：

【解决方案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>

【讨论】：