2010-12-12 16 views
5

Sono un po 'perplesso con questo. Sto visualizzando le visualizzazioni SVG usando Protovis, una libreria JS, e funziona perfettamente bene sia in Chrome che in Firefox. Salviamo l'SVG renderizzato sul mio server e provo a re-renderlo in una vista "gallery" usando una funzione PHP, e questo fallisce in Firefox. Tutto quello che vedo è il testo nell'SVG, ma non l'SVG.SVG in linea in Firefox

risparmio il contenuto completo svg, in questo modo:

<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" 

Ho provato con <object> ma tutto ciò che fa è pronta Firefox per scaricare un plugin non riesce a trovare.

Funziona in FF4 beta, ma non vedo perché non funzionerà anche in Firefox 3.6. È qualcosa su cui dovrei rinunciare? Potete vedere una demo qui:

http://www.rioleo.org/protoviewer (clicca su "galleria")

Grazie ancora una volta!

+0

hai provato l'intestazione ("Content-type: image/svg + xml"); – pastjean

+0

non rende comunque la pagina non visualizzabile? – Rio

risposta

4

Inline SVG funziona solo in Firefox in due situazioni:

  • Firefox ha il sperimentale HTML5 parser abilitato (ad esempio, stai usando una notte di notte)
  • Il documento che viene analizzato non è HTML ma XHTML (Content-type: application/xhtml+xml)

L'approccio object suggerito da Rob dovrebbe funzionare, a patto che il file in formato SVG separata è in arrivo dal server con Content-type: image/svg+xml e si utilizza la sintassi corretta:

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

Vedi Damian Cugley's article 'SVG: object or embed?' per i dettagli di alcune altre opzioni oppure utilizzare SVGWeb.

+0

Perché non funziona se cambio il meta tag di tipo contenuto nel file in xhtml + xml? – Rio

+0

@Rio Non ha nulla a che fare con il meta tag, il tipo di contenuto che conta è in un'intestazione HTTP inviata dal server web. Questo è solitamente controllabile da un linguaggio di scripting lato server, come da commento di pastjean. Se non stai utilizzando un linguaggio di scripting lato server, controlla la configurazione del tuo server web o prova a cambiare l'estensione del file in '.xhtml'. – robertc

0

Assicurarsi che si sta utilizzando gli attributi corretti con l'elemento oggetto e il tag di chiusura:

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

Buon punto, e ho apportato le modifiche e ora sembra un iFrame sia in Chrome che in Firefox (il codice è ancora presente nella scheda "galleria" se vuoi vedere), l'ultima casella. – Rio

+0

@Rio - quindi non ho credito per questo? – Rob

+0

Beh, non funziona: D – Rio

0

This example potrebbe essere utile per voi, explanation. Il supporto per il rendering SVG sul tempo di caricamento e MIME text/html è una funzionalità supportata del framework web Java ItsNat, in ogni caso ispirato allo this JS code, quest'ultimo può essere utile per te nel tuo contesto (PHP).