如何让 SVG 过滤器也能在 Firefox 上工作？

Question

我使用 SVG 滤镜使 CSS 动画中的顶行发光。它在 Chrome 上工作得很好，但在 Firefox 上却不行。我读到 Firefox 有不同的方式来读取 SVG 过滤器，所以我可能需要添加更多专门用于 Firefox 的代码。我尝试了几件事，但其中 none 成功了。关于如何完成此操作的任何想法？

提前谢谢大家。

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>

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

如何让 SVG 过滤器也能在 Firefox 上工作？

How to get SVG filters to work on Firefox as well?

html

css

svg

svg-filters

glow