SVG como fondo CSS

He intentado hacer que un rectángulo SVG simple funcione como fondo en IE9 o FF4 y ninguno me funciona. Aquí está mi código:SVG como fondo CSS

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
<div style="height:99px;background-image: url('bar.svg')"></div> 
<iframe src="bar.svg" height="99px"></iframe> 
</body> 
</html>

El iframe muestra el gráfico pero el div no. ¿Alguna idea de que pueda estar yendo mal?

He encontrado un ejemplo de trabajo here: pero no puedo hacer que funcione a mí mismo :( Me ha estado volviendo loco

Gracias por cualquier ayuda

Fuente

2011-03-23 user169867

¿Se puede publicar el código o una demostración de esta página en acción? El código se ve bien para mí (pero agregaría las comillas 'url ('foo')' y cambiar 'background to' background-image'). – Blender

Lamentablemente, no tengo acceso a un servidor web. Pero he usado el css anterior para las imágenes png y funciona bien. – user169867

De acuerdo con la licuadora. Sospecho que las citas que faltan alrededor de la URL son lo que te está mordiendo. – Rozwel

Gracias a todos por la ayuda. En realidad, era un problema del servidor web en el que se estaba utilizando el tipo MIME incorrecto para SVG & que hacía que los navegadores no se procesaran correctamente.

Esto es lo que me solucionó.

1st Cambié del servidor web incorporado de VS 2010 a IIS Express. Luego en mi configuración web agregué:

<system.webServer> 
    <staticContent> 
     <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> 
    </staticContent> 
</system.webServer>

Ahora todo funciona correctamente.

Fuente

2011-03-23 20:15:22 user169867

¡Gracias! Este fue exactamente mi problema. – Pandincus

¿Esto funciona jsFiddle para usted..?

http://jsfiddle.net/B3mnk/embedded/result/

fwiw, he añadido un tamaño de fondo para que sea agradable 'n grande.

Fuente

2011-03-23 18:37:56 Matijs

Sí lo hace. Empiezo a pensar que el problema no es realmente con el código sino con Visual Studio 2010. Puedo ejecutar las páginas localmente o en línea, pero si intento ejecutarlas en VS, solo el iframe funciona ... muy extraño. – user169867

Me temo que no sé nada de Visual Studio 2010. Si los ejecuta en VS, ¿qué navegador está siendo utilizado? ¿Es algo incorporado? – Matijs

Algunos artículos con ejemplos:

https://jwatt.org/svg/demos/xhtml-with-inline-svg.xhtml

http://helephant.com/2009/08/svg-images-as-css-backgrounds/

https://developer.mozilla.org/en/svg_in_html_introduction

http://www.broken-links.com/2010/06/08/using-svg-in-background-image/ - éste tiene una reserva para .png cerca de la parte inferior del artículo.

reportado como un error en Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=231179

Fuente

2011-03-23 18:53:22 tahdhaze09

¡Estaba teniendo el mismo problema en Joomla! 2.5 ejecutándose en el servidor Godaddy Linux.

Después de una intensa investigación aquí es cómo me fijo el problema:

Vaya al directorio raíz de la instalación de Joomla y localice el archivo .htaccess (o htaccess.txt si no está ya configurada)

Ahora añadir estas líneas al archivo:

AddType image/svg+xml svg 
AddType image/svg+xml svgz

Resto, utilice las propiedades CSS y HTML estándar para rendir su archivo SVG.

Fuente

2012-06-04 06:55:59 Hesen

Respuesta

Cuestiones relacionadas