Mozilla не видит контуров svg(stroke), как пофиксить?

Question

[alexiusgrey]

В хроме и опере все работает хорошо, а в мозилле нет контуров. Гуглил информацию на инглише, она или 2006-2010 года, и методы оттуда не помогли, или совсем не про мой случай. Может у кого такое было?
Сама свг-шка с анимацией.
Codepen
Я знаю что задание странное, просто так надо - именно свг.

Answer 1

[RAX7]

В названии аргументов фильтра ошибка.

<filter id="filter0_b_601_49" x="93.425" y="129.676" width="237" height="445.648" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
-      <feGaussianBlur in="BackgroundImage" stdDeviation="25"></feGaussianBlur>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="25"></feGaussianBlur>
      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_601:49"></feComposite>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_601:49" result="shape"></feBlend>
    </filter>

Хром видимо игнорирует кривой фильтр и отрисовывает без него, а лиса просто отказывается рисовать элемент с таким фильтром.
Зачем вообще там нужен этот фильтр для меня осталось загадкой

Comments

[alexiusgrey]

Выручили очень, спасибо!
Я его туда не добавлял, он там был. когда мне его уже дали.
Какую информацию гуглить, чтобы понять про фильтры? Я хочу тоже понимать это.
Я то понимаю. что что-то по свг, но вон fill-stroke-передвигание транзишеном я знаю, а фильтры нет.
Может что я сам не дизайнер. Подскажите пожалуйста хорошую документацию, может в закладках есть.

[RAX7]

alexiusgrey, вся документация есть на mdn https://developer.mozilla.org/en-US/docs/Web/SVG/E... , выбираешь нужный примитив фильтра и читаешь к нему описание.
Чтобы понять саму идею SVG фильтров можно заглянуть сюда https://alligator.io/svg/svg-filters/ , там описан пример как из примитивов составить цепочку для получения какого-нибудь эффекта.
Из закладок могу поделится удобным редактором для фильтров https://yoksel.github.io/svg-filters/

Answer 2

[Flying]

У вас на группах висят некие фильтры (<g filter="url(#filter0_b_601:49)" id="fg-group">) которые и приводят к пропаданию обводок.

Зачем он там применяется - не очень понятно, визуально отличий "с фильтром" и "без фильтра" я не увидел, но в частности там применяется feGaussianBlur. Убирание этого компонента фильтра (или всего фильтра) исправляет проблему.

Answer 3

[SVM]

не умничай,
просто откатисиь на старую версию
чтобы не было таких заморочек=польззуй ESR
уже лет 5 не падала лиса
создай новый профиль
запустиfirefox -p