Imagen de imagen a escala de grises (SVG)

Question

he estado tratando de convertir una imagen a escala de grises y volver a la normalidad en el flujo de flores: mirando a Convierte una imagen a Grayscale en HTML / CSS

Todo está funcionando bien en IE para el uso normal del filtro, sin embargo, el método SVG en Firefox no va tan bien.Mis páginas viven en la raíz del sitio, luego la hoja de estilo en /sitestyles/styles.css en los que llamo .HOMECASESTUDYIMAGE IMG {Filtro: URL (Filtros.svg # Escala de grises);

My Filters.svg también vive dentro del directorio / Sitestyles.Que se parece a esto:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <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>

Sé que esto funciona para los demás, así que supongo que es algo que ver con mi estructura de carpetas o posiblemente no hacer referencia a algo que ver con SVG?

Se aprecia cualquier ayuda

Answer 1

Asegúrese de que su servidor esté configurado para servir a los archivos .svg usando el tipo MIME SVG Imagen / SVG + XML .Firefox ignorará los archivos SVG que no se sirven con el tipo MIME correcto.