Cómo producir el mismo resultado en los diferentes navegadores cuando la incrustación de un archivo SVG en el código HTML?

StackOverflow https://stackoverflow.com/questions/1071328

Pregunta

Empiezo a tener una solución a mi pregunta anterior Superposición de SVG diagramas en google mapa.

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

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

<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 el mismo con Firefox y Safari.En mi SVG, el width, height y viewBox se definen.

Es allí una manera de tener el mismo resultado con todos los navegadores (no me importan, es decir que no soporta SVG..., por lo que "todos los navegadores" significa que al menos las últimas versiones de Firefox, Opera y Safari) ??Tal vez algo se me olvidó definir ?

EDITAR:También me di cuenta de que con <object>, el SVG es transparente con FF, pero no es transparente con Safari...:( Es allí una manera "estándar" para incluir un SVG ??

Gracias por su ayuda

¿Fue útil?

Solución

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

  • establece el atributo de anchura y altura en la etiqueta de objeto en html en valores absolutos (pixel)
  • establecer la anchura y altura de atributo en el archivo SVG a valores relativos (por ejemplo, 100%)

A continuación, tanto FF y Safari muestran el mismo comportamiento! Usted debe tratar de esto, si esto es aplicable a su situación.

EDIT: En cuanto a sus nuevas preguntas:  - Transparencia en Safari parece ser un error: errores Webkit  - forma estándar para incrustar: No creo que hay una manera estándar. Puede utilizar el objeto, iframe, img o SVG (declaración en línea).

Si quieres que funcione en todos los navegadores, es probable que tenga que utilizar el navegador oler y utilizar etiquetas de objeto o img dependiendo del navegador. O usted debe tratar iframes. ya que se supone que tienen fondos transparentes en Safari y Firefox. (Pero no saben sobre la ópera)

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

Otros consejos

Si está utilizando svgweb para IE prestación de SVG se puede lograr el mismo comportamiento para la mayoría de los navegadores. Esto supone que su SVG no es interactivo (contiene javascript), Oterwise necesita ser embebido 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top