css - insertar - svg src

La URL de XMLNS W3 para la especificación SVG ahora arroja un error en Chrome

Question

Utilicé esta máscara SVG para la escala de grises en los navegadores donde el filter: grayscale(100%) no funciona:

filter: url("data:image/svg+xml;utf8,<svg version=''1.1'' xmlns=''http://www.w3.org/2000/svg'' height=''0''><filter id=''greyscale''><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>#greyscale");

Hace un tiempo, esto funcionó perfectamente bien, pero ahora recibo este error en la consola:

Intento inseguro de cargar datos de URL: imagen / svg + xml; utf8, http: //www.w3.org/2000/svg ''height ='' 0 ''> # greyscale from frame con URL [ mi dominio aquí ]. Deben coincidir los dominios, protocolos y puertos.

No hace falta decir que el filtro de escala de grises ya no funciona.

1. ¿Puedes explicar qué está mal?
2. ¿Se puede arreglar esto para que se use el mismo código CSS, no se produzca ningún error y el filtro funcione?
3. Teniendo en cuenta que menciona el mismo dominio y protocolo, aunque no sé cómo implementar la solución, ya que no entiendo el problema, puedo colocar y vincular archivos en el mismo dominio / subdominio con el mismo protocolo, en lugar de usar recursos externos. URL

ACTUALIZAR:

El usuario @Potherca comentó:

... trabajé en Chrome 52, rompí en Chrome 53 ...

Esta es también mi experiencia. La máscara SVG no funciona en la versión actual de Chrome (versión de Chrome 53.0.2785.116) pero funcionó en la versión anterior. Todavía funciona en Firefox y Safari.

ACTUALIZACIÓN 2: Lo intenté con https como ...xmlns=''http://www.w3.org/2000/svg''... pero el error / error persiste.

ACTUALIZACIÓN 3: Como sugirió el usuario @Potherca, mover la línea de filtro SVG al principio de la lista de reglas de filtro de navegador cruzado elimina el error. NOTA: esta es una solución alternativa, pero el error principal todavía existe en Chrome / Safari / webkit, pero no en otros navegadores / kits en el momento de esta actualización.

Answer 1

Este problema se estaba produciendo en la versión de Chrome 59.0.3071.115 (compilación oficial) (64 bits)

Está funcionando después de que hice el cambio basado en la respuesta anterior

@media only screen and (min-width: 820px) {
            .brand-slider img {
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);

                filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 10+, Firefox on Android */

             transition: all 1000ms ease 0s;
            }
        }

El código modificado es

@media only screen and (min-width: 820px) {
        .brand-slider img {

            filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 10+, Firefox on Android */

            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
         transition: all 1000ms ease 0s;
        }
    }

Answer 2

Esto podría ayudar a alguien que no está usando un filtro SVG pero sigue recibiendo un mensaje de error similar.

Intento inseguro de cargar datos de URL: imagen / svg + xml; utf8 ...

Supongo que al menos Chrome y Firefox están usando filtros SVG debajo del capó, incluso cuando solo ha definido una regla de filter CSS.

Así que, en mi caso, el problema fue un filter bajo el selector de anidamiento de CSS con formato incorrecto que ocurrió porque estaba cambiando del anidado de estilo SASS al anidado de estilo de especificación de CSS. La especificación requiere que inicie cada selector anidado con & .

Answer 3

Tuve problemas similares. Para la compatibilidad con varios navegadores se agregaron varias líneas de filter en el CSS.

Parecía ser causado por el filtro SVG siendo el último en la línea. Al moverlo hacia arriba antes de otras líneas de filtro, Chrome utilizó otro filter y el error desapareció.

.gray-out {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */
}