0

Estou usando filter no CSS para fazer um efeito, mas como se trata de SVG Filter, faço o uso de filter: url('#id'); mas nos navegadores Firefox e Edge eles incrementam um caminho na frente que acaba removendo o efeito.

Como posso corrigir? Ainda estou aprendendo a lidar com SVG e suas várias maneiras de se trabalhar.

inserir a descrição da imagem aqui

Obs.: O filtro #grayscale se encontra dentro de um SVG na página junto aos demais svgs, segue:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>
4
  • 1
    Isso é um problema no seu servidor, e não com SVG etc... eu fiz um exemplo e coloquei no GitHub e abri pelo FireFox e não tive problema... Pode ser que seja algum WebPack da vida que vc está usando ai para compilar as coisas ou mesmo alguma config do Git... pode testar aqui no FF que vc vai ver que o filter:url() não pega o caminho completo hugocsl.github.io/svg/gooey.html tem que inspecionar o elemento pra vc ver. Se quiser posso postar como resposta...
    – hugocsl
    Commented 24/06/2019 às 18:45
  • 1
    Não usei nada de diferente, apenas inclui o SVG mais os códigos, não sei o que poderia estar afetando. Já tive outras dúvidas com base em SVG, incluindo o WordPress e como ele trata as propriedades do SVG... Acabei resolvendo no script rs Commented 26/06/2019 às 16:36
  • 1
    É pode ser que o WP acrescente automaticamente um path no caminho da imagem... Mas o que posso te falar é que esse não é um comportamento padrão. Foi alguma outra causa particular do seu projeto que fez isso acontecer.
    – hugocsl
    Commented 26/06/2019 às 16:39
  • 1
    Concordo, o WordPress não me deixava manipular corretamente o SVG, por exemplo, utilizava JS para alterar o valor da viewBox em determinado tamanho e ele me acrescentava viewbox (tudo minúsculo), duplicando o atributo. Além disso, se tentasse colar o SVG dentro de um campo de widget, ele pedia para transformar todos os atributos em minúsculo. Tentei buscar resposta, mas não obtive uma conclusão neste caso. Commented 26/06/2019 às 16:49

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .