0

我正在尝试创建一个使用 SVG 过滤器的动画以及stroke-dasharray创建渐进式“发光”线条效果的方法。经过相当多的研究，我能够整理出一些有效的东西：

JSFiddle（SVG 路径对于 SO 片段来说太大了）

我尝试的解决方案使用两组坐标，第一组是线条本身，然后是应用了 SVG 辉光滤镜的相同路径。在大多数情况下，动画看起来不错，就外观而言，接近我想要的。

问题是动画显然是资源密集型的，并且在 FireFox 和 Safari 中非常笨拙。我怎样才能实现同样的动画“发光线”效果，同时让它在这些浏览器中顺利运行？有没有办法绕过这么多坐标的性能影响，或者有没有更好的方法来实现发光效果而不使用两组路径？

还有它的价值……我没有使用 R2-D2 的图像，但实际的线条图由一组同样大的坐标组成，因此这是一个具有代表性的示例。

我是使用动画 SVG 的新手，我意识到我在这里的方法可能有点迟钝。很感谢任何形式的帮助。

4

2 回答 2

1

您可以进行很多优化来调整性能。您应该使用的基本模式如下所示：

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <g id="lines">
    <!--one set of paths, no classes, no attributes besides d-->
    <path d="..." />
  </g>
  <filter id="glow">
    <feGaussianBlur stdDeviation="4 4" result="glow"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="8"/>
    </feComponentTransfer>
  </filter>
</defs>
  <use xlink:href="#lines" class="line" />
  <use xlink:href="#lines" class="glow" filter="url(#glow)" />
</svg>

CSS：

body {
  background: black;
}

#lines {
  stroke-dasharray: 3400;
  stroke-dashoffset: 3400;
  animation: draw 16s forwards ease;
}

.line {
  stroke: white;
  stroke-width: 1;
}

.glow {
  stroke: lime;
  stroke-width: .7;
  fill: none;
  opacity: .5;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

需要注意的关键点

  • 只有一组路径
  • 只有一个动画，应用于<g>路径周围
  • 样式和过滤器应用于<use>
  • 更简单的过滤器，只有 2 个计算步骤而不是 9 个
于 2017-05-14T01:36:17.753 回答
1

好吧，您要做的是避免所有那些重新计算的过滤器。所以你可以做的是先画出发光的图画，然后在上面画一个 4px 的黑色描边副本，然后对过度绘制进行反向动画 - 从而露出原件。

于 2017-05-13T16:53:58.833 回答