动画发光的 SVG 线条图不能跨浏览器工作

Question

我正在尝试创建一个动画，它使用 SVG 滤镜和 stroke-dasharray 方法来创建渐进绘制的 "glowing" 线条效果。经过相当多的研究后，我能够将一些类似的作品放在一起：

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

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

问题是动画显然是资源密集型的，并且在 FireFox 和 Safari 中非常笨拙。我怎样才能在这些浏览器中顺利地达到 "glowing line" 动画效果的同时达到运行效果？有没有办法解决如此大的坐标集对性能造成的影响，或者有没有更好的方法可以在不使用两组路径的情况下实现发光效果？

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

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

Answer 1

好吧，您要做的是避免所有这些重新计算的过滤器。所以你可以做的是先画出发光的图，然后在它的顶部画一个 4pxish 的黑色描边副本，然后对过度绘制进行反向动画 - 从而显示原始图。

Answer 2

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

<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 个

动画发光的 SVG 线条图不能跨浏览器工作

Animated glowing SVG line drawing not working across browsers

html

css

svg

glow

line-drawing