Question

我尝试创建一个使用SVG过滤器的动画，并使用stroke-dasharray方法创建逐步绘制的＆＃34;发光＆＃34;线条效应。经过相当多的研究后，我能够把一些有用的东西放在一起：

JSFiddle（SVG路径对于SO片段而言太大了）

我尝试的解决方案使用两组坐标，第一组是线本身，后面是应用了SVG发光滤镜的相同路径。在大多数情况下，动画看起来还不错，接近我喜欢的外观。

问题在于动画显然是资源密集型的，并且在FireFox和Safari中非常笨重。我怎样才能实现同样的动画＆＃34;发光线＆＃34;在这些浏览器中顺利运行时效果如何？有这么大的坐标可以解决性能问题，还是有更好的方法来实现发光效果而不使用两组路径？

另外，对于它的价值......我没有使用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线条图不适用于浏览器

2 个答案: