2010-12-12 24 views
5

Estoy un poco perplejo con este. Estoy renderizando SVG usando Protovis, una biblioteca JS, y funciona perfectamente tanto en Chrome como en Firefox. Guardo el SVG renderizado en mi servidor y trato de volver a procesarlo en una vista de "galería" usando una función de PHP, y esto falla en Firefox. Todo lo que veo es el texto en el SVG, pero no el SVG.SVG en línea en Firefox

ahorro el contenido SVG completo, así:

<svg height="220" width="880" stroke-width="1.5" stroke="none" fill="none" font-family="sans-serif" font-size="10px"><g transform="translate(30, 10)"><line stroke-width="1" 

He intentado usar <object> pero lo único que hace es rápido Firefox para descargar un plugin que no puede encontrar.

Funciona en FF4 beta, pero no veo por qué no funcionará incluso en Firefox 3.6. ¿Es esto algo a lo que debería renunciar? Se puede ver una demo aquí:

http://www.rioleo.org/protoviewer (haga clic en "galería")

Gracias una vez más!

+0

has probado el encabezado ("Tipo de contenido: imagen/svg + xml"); – pastjean

+0

¿Eso no hace que la página no sea visible? – Rio

Respuesta

4

Inline SVG sólo funciona en Firefox en dos situaciones:

  • Firefox tiene el experimental HTML5 parser habilitado (es decir, está utilizando un 4.0 cada noche)
  • El documento que se analiza no es HTML, pero XHTML (Content-type: application/xhtml+xml)

El enfoque object sugerido por Rob debería funcionar, siempre y cuando el archivo SVG separada proviene de su servidor con Content-type: image/svg+xml y utilizar la sintaxis correcta:

<object data="foo.svg" type="image/svg+xml" width="400" height="300"> 

Ver Damian Cugley's article 'SVG: object or embed?' para más detalles de algunas otras opciones , o use SVGWeb.

+0

¿Por qué no funciona si cambio la metaetiqueta del tipo de contenido en el archivo a xhtml + xml? – Rio

+0

@Rio No tiene nada que ver con la etiqueta meta, el tipo de contenido que importa está en un encabezado HTTP enviado por el servidor web. Esto es usualmente controlable desde un lenguaje de scripting del lado del servidor, según el comentario de pastjean. Si no está utilizando un lenguaje de scripting del lado del servidor, verifique la configuración de su servidor web, o intente cambiar la extensión del archivo a '.xhtml'. – robertc

0

Asegúrese de que está utilizando los atributos correctos con el elemento de objeto y de la etiqueta final:

<object data="yourimage.svg"></object> 
+0

Buen punto, e hice los cambios y ahora parece un iFrame tanto en Chrome como en Firefox (el código aún está allí en la pestaña "Galería" si quiere verlo), el último cuadro. – Rio

+0

@Rio - ¿así que no me da crédito por esto? – Rob

+0

Bueno, no funciona: D – Rio

0

This example puede ser útil para usted, explanation. El soporte de representación SVG en tiempo de carga y MIME text/html es una característica admitida de ItsNat framework web Java, de todos modos se inspiró en this JS code, este último puede ser útil para usted en su contexto (PHP).