如何让 SVG 过滤器也能在 Firefox 上运行？答案

【问题标题】：How to get SVG filters to work on Firefox as well?如何让 SVG 过滤器也能在 Firefox 上运行？
【发布时间】：2017-11-05 14:57:28
【问题描述】：

我使用 SVG 过滤器使我的 CSS 动画的顶行发光。它在 Chrome 上运行得非常好，但在 Firefox 上却不行。我读到 Firefox 有一种不同的方式来读取 SVG 过滤器，所以我可能需要添加更多专门针对 Firefox 的代码。我已经尝试了几件事，但它们都没有奏效。关于如何实现这一点的任何想法？

提前感谢大家。

body {
  background-color: black;
  height: 100vh;
}

.a1 {
  filter: url(#filter1);
  animation: stroke_fill1 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill1 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(0, 255, 216);
    stroke-dashoffset: 0;
  }
}

.b1 {
  animation: stroke_fill2 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill2 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(149, 149, 149);
    stroke-dashoffset: 0;
  }
}

<body>

  <svg width="500px" height="400px" viewBox="75.000 80.7 350.769 80.092">

<defs>
       <filter id="filter1" y="-40%" height="180%">
<feGaussianBlur in="offOut" stdDeviation="5.5" result="blurOut"/>
           <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />

    </filter>
</defs>

  <path class="a1" stroke="#00E6CF" d=" M 151.5 255.5 L 448.5 255.5 C 455.399 255.5 461 261.101 461 268 L 461 268 C 461 274.899 455.399 280.5 448.5 280.5 L 151.5 280.5 C 144.601 280.5 139 274.899 139 268 L 139 268 C 139 261.101 144.601 255.5 151.5 255.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" filter="url(#filter1)" />

  <path class="b1" stroke="rgb(149, 149, 149)" d=" M 151.5 319.5 L 448.5 319.5 C 455.399 319.5 461 325.101 461 332 L 461 332 C 461 338.899 455.399 344.5 448.5 344.5 L 151.5 344.5 C 144.601 344.5 139 338.899 139 332 L 139 332 C 139 325.101 144.601 319.5 151.5 319.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" />


</svg>

</body>

【问题讨论】：

嗨@RobertLongson，谢谢你的回复，我对svg过滤器不太熟悉，我在玩，设法以某种方式获得发光效果。如果有更好的方法，请不吝赐教。这只是我需要的顶线上的发光效果。
过滤器需要组成一个链，如果你有 in="xxx" 那么必须有另一个过滤器 result="xxx" 否则这个链是无效的，它不起作用。跨度>
@RobertLongson 我刚刚通过按照您建议的方式更正它并删除一些内容来解决它。我怎样才能给你最好的答案？新的工作过滤器如下：

标签： html css svg svg-filters glow

【解决方案1】：

所以，感谢@RobertLongson，我检查了我的代码，我意识到这里和那里有无用的东西以及错误的语法。这是工作的。再次感谢。

body {
  background-color: black;
  height: 100vh;
}

.a1 {
  filter: url(#filter1);
  animation: stroke_fill1 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill1 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(0, 255, 216);
    stroke-dashoffset: 0;
  }
}

.b1 {
  animation: stroke_fill2 4s linear forwards;
  stroke-dasharray: 850.100;
  stroke-dashoffset: 850.100;
}

@keyframes stroke_fill2 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
    stroke-dashoffset: 0;
  }
  100% {
    fill: rgb(149, 149, 149);
    stroke-dashoffset: 0;
  }
}

<body>

  <svg width="500px" height="400px" viewBox="75.000 80.7 350.769 80.092">

<defs>
   <filter id="filter1" y="-40%" height="180%">
       <feGaussianBlur stdDeviation="5.5" result="blurOut"/>
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>

    </filter>
</defs>

  <path class="a1" stroke="#00E6CF" d=" M 151.5 255.5 L 448.5 255.5 C 455.399 255.5 461 261.101 461 268 L 461 268 C 461 274.899 455.399 280.5 448.5 280.5 L 151.5 280.5 C 144.601 280.5 139 274.899 139 268 L 139 268 C 139 261.101 144.601 255.5 151.5 255.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" filter="url(#filter1)" />

  <path class="b1" stroke="rgb(149, 149, 149)" d=" M 151.5 319.5 L 448.5 319.5 C 455.399 319.5 461 325.101 461 332 L 461 332 C 461 338.899 455.399 344.5 448.5 344.5 L 151.5 344.5 C 144.601 344.5 139 338.899 139 332 L 139 332 C 139 325.101 144.601 319.5 151.5 319.5 Z " transform="translate(-60.5 -173.5)" stroke-miterlimit="10" />


</svg>

</body>

【讨论】：