html - El filtro SVG solo funciona cuando se agrega en el atributo de estilo(Firefox)
css svg-filters (6)
He intentado todas las formas de resolver este problema sin hacer un filtro en línea (con la cadena base64 en css) desde este hilo, incluido el uso de la ruta completa al archivo .svg en url (), pero el único método resolvió este problema. Firefox ve el filtro solo si está aplicando la regla css en el atributo de estilo del elemento, o si define reglas css en la etiqueta en línea <style></style> .
Agregué un efecto svg a mi HTML (texto / html):
<html>
<head>...</head>
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" height="0">
<filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
<feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
</filter>
</svg>
</body>
</html>
A lo que me refiero en mi hoja de CSS:
#page-container {
filter: url("#svgBlur");
-webkit-filter: blur(8px);
}
Hacer esto hace que el # page-container aparezca en blanco (FF no reconoce el filtro SVG).
La parte funky:
Cuando deshabilito la regla de filtro anterior en Firebug y la leí en el atributo de estilo del # contenedor de página, funciona como un encanto.
<div id="page-container" style="filter: url("#svgBlur");">
¿Qué estoy supervisando?
Cabeceras de respuesta:
Cache-Control no-cache, must-revalidate, post-check=0, pre-check=0
Connection Keep-Alive
Content-Encoding gzip
Content-Language nl
Content-Length 6098
Content-Type text/html; charset=utf-8
Date Mon, 02 Dec 2013 14:47:01 GMT
Etag "1385995621"
Expires Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive timeout=15, max=100
Last-Modified Mon, 02 Dec 2013 14:47:01 +0000
Link </nl/node/215271>; rel="canonical",</nl/node/215271>; rel="shortlink"
Server Apache/2.2.3 (Red Hat)
Vary Accept-Encoding
X-Powered-By PHP/5.3.19
Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter
Incluí el svg como una cadena base64 directamente en el archivo css. Esto solucionó mi problema.
filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)
Lo que zelanix dijo anteriormente ... acerca de agregar un. antes del filtro como en
.blur1 {
filter:url(.#blur1);
}
Hace el truco al 100% y funciona en todos los navegadores por lo que puedo decir
Mi problema que me llevó aquí fue que había escondido el SVG dentro de un div con "display: none" incrustado en la clase.
Parece funcionar bien en Firefox como tal,
HTML
<svg xmlns="http://www.w3.org/2000/svg" height="0">
<filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
<feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
</filter>
</svg>
<div id="page-container">
<img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="forest" />
</div>
JSFIDDLE (con una imagen en la div)
JSFIDDLE (con una imagen de fondo en el div)
¿Incluyó el código svg en su marca html?
#svgBlur es una URL relativa. Se convierte en una URL absoluta al anteponer el nombre del archivo en el que está
filter: url("#svgBlur");
en su caso es realmente una taquigrafía para
filter: url("stylesheet.css#svgBlur");
Lo que no apunta a nada.
Necesitas poner el nombre del archivo html en la URL
filter: url("yourhtmlfile.html#svgBlur");
trabajará. Y es por eso que funciona cuando está en el archivo html, por supuesto, ya que el nombre del archivo adjunto apunta al lugar correcto en ese caso.