Come produrre lo stesso risultato su browser diversi quando si incorpora il file SVG nel codice HTML?

Inizio ad avere una soluzione per la mia domanda precedente Overlay SVG diagrams on google map.Come produrre lo stesso risultato su browser diversi quando si incorpora il file SVG nel codice HTML?

Ma ho un altro (più piccolo) problema. Sto usando Firefox 3.5 e Safari 4 (su Mac), e quando incorporo SVG in un XHTML, non ho affatto lo stesso risultato.

Posso usare gli elementi <object> o <embedded> (ma penso che l'ultimo sia obsoleto). Io li uso così:

<div id="map_canvas" style="width: 900px; height: 900px"> 
    <object data="test.svg" width="100%" height="100%" type="image/svg+xml"/> 
</div>

e la dimensione e la portata del SVG non è la stessa con Firefox e Safari. Nel mio SVG, sono definiti width, height e viewBox.

C'è un modo per ottenere lo stesso risultato con tutti i browser (non mi interessa di IE che non supporta SVG ..., quindi "tutti i browser" significa almeno le ultime versioni di Firefox, Opera e Safari) ?? Forse qualcosa che ho dimenticato di definire?

EDIT: Ho anche notato che con <object>, lo SVG è trasparente con FF, ma non trasparente con Safari ... :( Esiste un modo "standard" per includere uno SVG ??

Grazie per il vostro aiuto

fonte

2009-07-01 ThibThib

Grazie per la domanda. Questo mi ha aiutato molto a risolvere il mio supporto cross browser per i file svg. Il supporto vergognoso non è più coerente. –

Nel passaggio, un altro fattore che potrebbe spiegare le differenze nel rendering del browser dei file SVG è l'attributo 'letter-spacing'. Al momento non è supportato in Firefox, consultare https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note –

ho solo ottenere diversi risultati in termini di dimensioni tra Firefox e Safari (su Windows) quando un viewBox è definito nella svg.

una soluzione è quella di

imposta l'attributo width e height nel tag dell'oggetto in html su valori assoluti (pixel)
imposta l'attributo width e height nel file svg su valori relativi (ad es. 100%)

Quindi sia FF che Safari mostrano lo stesso comportamento! Dovresti provare questo, se questo è applicabile alla tua situazione.

EDIT: Per quanto riguarda le vostre nuove domande: - Trasparenza in Safari sembra essere un bug: bugs Webkit - modo standard per l'incorporamento: Io non credo che ci sia un modo standard. puoi usare object, iframe, img o svg (dichiarazione inline).

Se si desidera che funzioni in ogni browser, è probabilmente necessario utilizzare lo sniffing del browser e utilizzare tag object o img in base al browser. O dovresti provare iframe. come dovrebbero avere sfondi trasparenti in safari e firefox. (Ma non so su Opera)

Come sempre a sostegno del browser webdev è il grande problema, come si può vedere qui: svg support (quando si fa clic l'immagine, è possibile controllare per le caratteristiche di SVG in dettaglio)

fonte

2009-07-02 05:55:40

Grazie Funziona. Ma riguardo la trasparenza? Se metti qualcosa sotto SVG, c'è uno sfondo bianco con Safari, ma non con FF. E se uso l'elemento per incorporare il mio SVG, funziona (senza sfondo) con Safari, ma non con FF (questo è il motivo per cui GGroundOverlay non funziona con FF, usa uno per incorporare l'SVG - vedi la mia prima domanda su Overlay SVG con google map) – ThibThib

ti ha fornito alcuni suggerimenti sul problema della trasparenza. dimmi se puoi risolvere questo problema .. –

Ok Grazie per tutte queste risposte. Probabilmente sceglierò il tag a seconda del browser. Grazie per aver indicato i collegamenti (e il bug del webkit)! – ThibThib

Se si utilizza svgweb per il rendering IE di SVG, è possibile ottenere lo stesso comportamento per la maggior parte dei browser. Questo presuppone che SVG non sia interattivo (contiene javascript), altrimenti deve essere incorporato per qualsiasi browser.

<html> 
    <head> 
    <!--[if IE]>--><script type="text/javascript" src="javascripts/svg/svg.js"></script><!--<![endif]--> 
    </head> 
    <body> 
    <div id="map_canvas" style="width: 900px; height: 900px"> 
     <!--[if !IE]>--><img src="test.svg" width="900" height="900" /><!--<![endif]--> 
     <!--[if lt IE 9]><object src="test.svg" classid="image/svg+xml" width="900" height="900"></object><![endif]--> 
     <!--[if gte IE 9]><object data="test.svg" type="image/svg+xml" width="900" height="900"></object><![endif]--> 
    </div> 
    </body> 
</html>

fonte

2011-09-23 09:18:49 Martin

Come produrre lo stesso risultato su browser diversi quando si incorpora il file SVG nel codice HTML?

risposta

Problemi correlati