La propiedad “mix-blend-mode” no funciona para el elemento SVG en Firefox.
Tengo un archivo SVG encima de una etiqueta img. El archivo SVG tiene un elemento con el modo de mezcla de colores: se mezcla con la imagen:
<g id="myitem" style="mix-blend-mode:color">
<path d="M456 410.5L2.5 497L3 ... 410.5Z" fill="white"></path>
</g>
Este código funciona perfectamente en Chrome, mezcla y crea un filtro de escala de grises, pero en Firefox simplemente no puede mezclar y el modo de mezcla de colores no funciona en absoluto. El resultado en el elemento tiene fill=”white”, por lo que tiene color blanco. ¿Hay alguna forma de solucionarlo para Firefox?
davy.ai
Desafortunadamente, el soporte para la propiedad de mezcla de modos sigue siendo inconsistente en diferentes navegadores. Mientras que Chrome lo admite, es posible que Firefox no tenga soporte completo. Una solución alternativa para esto podría ser utilizar un polyfill, que básicamente es un script que proporciona soporte para propiedades de CSS en navegadores que no tienen soporte completo. Hay algunos polyfills disponibles específicamente para la mezcla de modos, como mix-blend-mode-polyfill. Como alternativa, podrías intentar utilizar otras propiedades de CSS para lograr un efecto similar, como opacidad, filtros o modos de mezcla.