Uso de datos: SVG codificado como filtro CSS

Tal vez alguien pueda señalar un error en mi prueba, pero parece que si quiero usar un filtro SVG en CSS codificándolo como data: uri para evitar el uso de un archivo adicional, falla si los datos no están codificados como base64.Uso de datos: SVG codificado como filtro CSS

He probado con Firefox Aurora, otros navegadores no parecen reconocer el filtro en ninguno de los casos.

Archivo de prueba:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 

#filter1 { 
filter:url(data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"><filter id%3D"desaturate"><feColorMatrix type%3D"saturate" values%3D"0"%2F><%2Ffilter><%2Fsvg>#desaturate); 
} 

#filter2 { 
filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate); 
} 

</style> 
</head> 
<body> 
<p style="color:red" id=filter1>Filter applied "as is"</p> 
<p style="color:red" id=filter2>This one is encoded as base64</p> 
</body> 
</html>

demostración en vivo en http://martinezdelizarrondo.com/bugs/svgfilter.html

el contenido de la dirección URL() es el mismo en ambos casos:

<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>

codificados con http://software.hixie.ch/utilities/cgi/data/data

Como puede ver, el primero permanece rojo, pero en el segundo d caso se aplica el filtro svg y el texto se vuelve gris.

¿Me olvidé de algo en el primer caso?

En this bug no encuentro nada acerca de la codificación, así que supongo que debería ser posible (y desde luego con una codificación de texto simple es mucho mejor en lugar de "encriptar" con base 64)

Gracias

Fuente

2012-07-28 AlfonsoML

Después de más pruebas y errores, he encontrado que usar escape en los datos funciona y ahora solo tenemos que esperar a que otros navegadores implementen soporte para él.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 

#filterBase64 { 
    filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate); 
} 

#filterEscape { 
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate); 
} 

</style> 
</head> 
<body> 
<p style="color:red" id=filterBase64>This one is encoded as base64</p> 
<p style="color:red" id=filterEscape>Filter encoded with "escape()"</p> 
<p style="color:red" id=filterScript>This one is applied with javascript</p> 
<script> 
document.getElementById("filterScript").style.filter="url(data:image/svg+xml," + escape('<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>') + "#desaturate)"; 
</script> 
</body> 
</html>

Fuente

2012-07-28 20:36:57 AlfonsoML

Sé que esto es lo viejo, pero Chrome no apoyar una cosa similar y lo mismo ocurre con IE utilizando diversas sintaxis de filtro: http://www.html5rocks.com/en/tutorials/filters/understanding-css/. FF necesita una ruta de archivo, Chrome puede admitir la nueva propiedad de filtro e IE la anterior :) Más información buena aquí: http://stackoverflow.com/questions/13695176/referencing-in-page-svg-in-chrome –

Alguien más nota que esto ya no funciona? 'background-image: url (data ...)' funciona bien, pero coloca los mismos 'datos ...' en 'filter: url (data ...)' y recibe un 'Inseguro intento de cargar la URL .. .' error. – rojobuffalo

Uso de datos: SVG codificado como filtro CSS

Respuesta

Cuestiones relacionadas