¿Cómo se produce el mismo resultado en diferentes navegadores al incrustar un archivo SVG en código HTML?

Empiezo a tener una solución para mi pregunta anterior Overlay SVG diagrams on google map.¿Cómo se produce el mismo resultado en diferentes navegadores al incrustar un archivo SVG en código HTML?

Pero tengo otro problema (más pequeño). Estoy usando Firefox 3.5 y Safari 4 (en Mac), y cuando estoy integrando SVG en un XHTML, no tengo el mismo resultado.

Puedo usar los elementos <object> o <embedded> (pero creo que el último está en desuso). Los uso como esa:

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

y el tamaño y la escala de la SVG no es lo mismo con Firefox y Safari. En mi SVG, se definen width, height y viewBox.

Hay una manera de obtener el mismo resultado con todos los navegadores (no me importa IE que no admita SVG ..., por lo que "todos los navegadores" significa al menos las últimas versiones de Firefox, Opera y Safari) ?? Tal vez algo que olvidé definir?

EDIT: También se dio cuenta de que con <object>, el SVG es transparente con FF, pero no es transparente con Safari ... :( ¿Hay una manera "estándar" para incluir una SVG ??

Gracias por su ayuda

Fuente

2009-07-01 ThibThib

Gracias por la pregunta. Esto me ayudó mucho a resolver mi compatibilidad con navegadores cruzados para archivos svg. La vergüenza de apoyo no es más consistente. –

De pasada, otro factor que puede explicar las diferencias en la representación del navegador de los archivos SVG es el atributo 'espaciado de letras '. Actualmente no es compatible con Firefox, consulte https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note –

solo me dan resultados diferentes en tamaño entre Firefox y Safari (en Windows) cuando un negatoscopio se define en el SVG.

una solución es

establezca el atributo de ancho y alto en la etiqueta de objeto en html a valores absolutos (píxel)
establezca el atributo de ancho y alto en el archivo svg en valores relativos (p. Ej. 100%)

¡Entonces ambos FF y Safari muestran el mismo comportamiento! Debe intentar esto, si esto es aplicable a su situación.

EDIT: En cuanto a sus nuevas preguntas: - Transparencia en Safari parece ser un error: bugs Webkit - forma estándar para incrustar: No creo que hay una manera estándar. puede usar object, iframe, img o svg (declaración en línea).

Si desea que funcione en todos los navegadores, es probable que deba usar el rastreo del navegador y usar etiquetas de objeto o img según el navegador. O deberías probar iframes. ya que se supone que tienen fondos transparentes en safari y firefox. (Pero no saben sobre la ópera)

Como siempre en apoyo navegador WebDev es el gran problema, como se puede ver aquí: svg support (al hacer clic en la imagen, se puede comprobar si las características de SVG en detalle)

Fuente

2009-07-02 05:55:40

Gracias Funciona. ¿Pero sobre la transparencia? Si coloca algo debajo del SVG, hay un fondo blanco con Safari, pero no con FF. Y si uso el elemento para incrustar mi SVG, funciona (sin fondo) con Safari, pero no con FF (esa es la razón por la cual GGroundOverlay no funciona con FF, usa un para incrustar el SVG - ver mi primera pregunta sobre Overlay SVG con el mapa de Google) – ThibThib

le dio algunos consejos sobre el tema de la transparencia. dime si puedes resolver este problema ... –

Ok Gracias por todas estas respuestas. Probablemente elegiré la etiqueta dependiendo del navegador. ¡Gracias por señalar los enlaces (y el error de webkit)! – ThibThib

Si está usando svgweb para la representación de IE de SVG, puede lograr el mismo comportamiento para la mayoría de los navegadores. Esto supone que su SVG no es interactivo (contiene javascript), de lo contrario, debe ser incrustado para cualquier navegador.

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

Fuente

2011-09-23 09:18:49 Martin

¿Cómo se produce el mismo resultado en diferentes navegadores al incrustar un archivo SVG en código HTML?

Respuesta

Cuestiones relacionadas