Как заставить SVG фильтры работать на Firefox?

Я использовал фильтр 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>

Источник

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>

Источник
Другие вопросы по тегам