2013-04-12 18 views
12

Sto costruendo un'app RoR del browser in-game per Eve Online. Uno dei requisiti della mia app è la visualizzazione di un grafico SVG generato da graphviz. Sto riscontrando alcuni problemi nel soddisfare le mie esigenze in questo ambiente.Inline SVG vs <object> incorporato

Nessuna documentazione ufficiale è disponibile per IGB di Eva, ma il wiki indica:

La nuova EVE Online in-browser game (nome in codice Moondoggie) si basa su una pila di tecnologia combinazione di due elementi:

Awesomium: un livello middleware che fornisce pagine Web renderizzate come dati analizzabili da un motore 3D. Awesomium è sviluppato da Khrona Software.

Chromium: un livello middleware che fornisce comunicazione tra processi, rendering di pagine Web, comunicazioni HTTP e tutte le altre nozioni di base necessarie per la scrittura di un browser web. È, a sua volta, basato sul framework Webkit di Apple. Chromium è un progetto open source sostenuto principalmente da Google.

Per questo motivo, Moondoggie è in grado di superare il test Acid3 e quindi supportare le specifiche HTML 4.01 e CSS3 complete.

Ho bisogno dei collegamenti che sto includendo in SVG per accedere al javascript della mia app. Incorporandolo con <embed> o <object>, l'SVG non rientra nell'ambito dei miei file JS.

Utilizzare <embed> o <object> rende lo svg correttamente all'interno del browser di gioco. Quando è in linea come l'ho di seguito, mostra una riga di testo che contiene SOLO gli elementi di testo di SVG.

Aggiornamento Ecco dove sono. Sono abbastanza sicuro che la maggior parte di questo è ridondante, in quanto non ho notato una differenza semplicemente usando il render file: all'interno della mia vista da solo. Penso che la registrazione del tipo mime sia più utile con respond_to, ma non sono sicuro di come usarlo in questo scenario.

frammento di vista principale:

<%= render "map/map" %> 

parziale file di vista:

<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:svg="http://www.w3.org/2000/svg"> 
<head> 
    <title>Embedded SVG</title> 
</head> 
    <body> 
     <%= render file: @map.output_file_path %> 
    </body> 
</html> 

config/initializers/mime_types.rb:

Mime::Type.register "image/svg+xml", :svg 

non capisco il motivo per cui rende bene all'interno di un tag <object> ma non quando è in linea. Come posso emulare l'ambiente all'interno di un <object> nella mia vista principale? Oppure, come posso dare l'accesso al tag <object> alle mie funzioni javascript?

+0

Ciò significa che questo browser basato su Webkit non supporta HTML5? Sta usando XHTML 4 un'opzione? Per pre-HTML5, nella mia esperienza XHTML è davvero il modo più promettente per farlo funzionare. –

+0

Esiste un "supporto prototipo per HTML5" ma sembra che ci sia un errore. Non sono veramente sicuro. Questa è letteralmente tutta la documentazione che c'è su ciò che questo browser fa e non supporta. Non ho molta familiarità con XHTML, né ho una buona padronanza di doctype, ma sto guardando questo: http://www.w3.org/QA/2002/04/valid-dtd-list.html . Presumo che dovrò usare uno di questi invece di '' per usare XHTML? – sicks

+0

Solo un'idea. Potrebbe valere la pena dare un'occhiata a ciò che fa Google Charts. Fanno un uso piuttosto pesante di SVG e Javascript, quindi potresti essere in grado di ottenere alcune idee lì. Forse puoi scavare nel grafico a torta sulla galleria interattiva https://developers.google.com/chart/interactive/docs/gallery per idee. Penso che utilizzino direttamente il tag , che mantiene tutto nello scope. – Phil

risposta

4

È possibile accedere al documento all'interno di un oggetto <> o < incorporato> dal documento principale. Questo è uno dei (troppo pochi) svg che ACID3 verifica ancora.

Here's an example di come modificare un documento svg da uno script nel documento html principale.

+0

L'oggetto/embed necessita di listener di eventi dal genitore. Ecco perché all'inizio stavo usando inline. Puoi aggiungere i listener di eventi ai tag all'interno di '' che funzioni di chiamata dalla mia pagina padre? – sicks

+0

Sì. Aggiungi i listener di eventi con 'elm.addEventListener' e quindi nella funzione che gestisce l'evento puoi chiamare ad esempio' window.parent.yourFunctionInMainDocument (...) ', leggermente simile a questo esempio: http: //dahlström.net /svg/html/from-svg-to-parent-html-script.html. –