Question

我使用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>

Answer 1

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

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

如何让SVG过滤器在Firefox上运行？

1 个答案: