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.
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>
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.viewBox
em determinado tamanho e ele me acrescentavaviewbox
(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.