Кроссбраузерность SVG фильтров

#svg #filter

Имеем некий фильтр который по разному выглядит в Edge и Chrome

Я хочу что бы этот фильтр выглядел так же как и в Edge но тщетно ..

Как можно стандартными средствами получить такой же эффект как это выглядит в Edge ?








Что бы было удобнее смотреть в Edge я прикреплю песочницу: codepen/pen

Скрины позволяющие понять ситуацию 



    

Ответы

Ответ 1

Задача была поставлена довольно трудная, так как Chrome убрал поддержку фильтров
svg для текстов. 
В свою очередь Edge изначально не поддерживает svg filter через css свойства. 

И все вместе браузеры немного по разному обрабатывают и отражают одни и те же фильтры
с одинаковыми настройками.    

Решение 


Чтобы обойти ограничение Chrome на применение фильтров к текстам,
решил попробовать заменить буквы на unicode аналоги - не сработало.
С помощью векторного редактора оконтурил буквы и забрал их path Это сработало
Применил другое количество и другие svg фильтры  
С помощью изменения атрибутов фильтров можно в широком диапазоне
менять внешний вид надписи.  

В результате данный текстурный эффект работает во всех браузерах включая IE и Edge
и Chrome    


Образец, практически, как в вопросе  









  

Настройки 

Уменьшение baseFrequency="0.027 0.027" увеличивает волновое искажение 









   

при baseFrequency="0.4 0.4" буквы принимают вид мозаики или как из под баллончика
с краской   









  

seed="30" задает количество слоев для искажения


Ответ 2

Sara Soueidan, автор этого эффекта, пишет в статье, что данный эффект имеет ограниченную
поддержку современными браузерами.   


  This said, Chrome has recently stopped applying the distortion effect
  on the text. There’s some more information about this issue in this
  thread.


При этом Chrome недавно прекратил применять эффект искажения к тексту. Есть еще немного
информации об этой проблеме в этом репорте бага Chrome

Работает:  

Проверил, данный эффект работает только в Firefoxи Edge 

Не работает:   

Все браузеры на WebKit движках не воспроизводят данный эффект  

Chrome, Opera, Yandex, Safari       

Поэтому проблему  кроссбраузерности в этом вопросе решить невозможно.