Mobile Safari SVG Problema

Estoy tratando de conseguir una imagen SVG a aparecer en mi iPhone (o iPad) navegador por defecto, pero me parece que no puede conseguir aunque sea un rect para mostrar.

Ejemplo en: http://www.invalidpage.com/svg/svgtest.html

Fuente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  <head>
    <title>SVG iPhone Test</title>
  </head>
  <body>
    <div>
      <svg width="500" height="220">
        <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
      </svg>
    </div>
  </body>
</html>

7 Kommentare

  1. 40

    Agregar xmlns="http://www.w3.org/2000/svg" version="1.1" a su svg etiqueta.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
      <head>
        <title>SVG iPhone Test</title>
      </head>
    <body >
          <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
          </svg>
    
    
    </body>
    </html>

    HTTP tipo MIME entregado por http://www.invalidpage.com/svg/svgtest.html es
    "Content-Type: text/html". HTML inline svg funciona con el tipo MIME "Content-Type: text/xml" puede crear esta por terminar el documento XML en lugar de HTML como lo han hecho aquí.

    No está seguro de si el Ipad se preocupa por la Content-Type pero otros navegadores.

    Actualizado

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    También puede ser utilizado; es lo que se muestra en el Ipad ejemplos de svg. Cuando el documento se entrega como un XML no HTML, se debe comenzar con <xml version="1.0" standalone="no">;

    <?xml version="1.0" standalone="no"?>
    
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    
          <svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
          </svg>
    • En realidad, la forma en que se trabaja en todo excepto en el iPad/iPhone, en la medida de lo que puedo decir. He conectado RaphaelJS y se está trabajando en iOS, ahora también. También me hizo intentar la xmlns y atributos de versión, mismo resultado, funciona en todas partes, excepto iOS.
    • Se hace representar en el Chrome que utiliza el motor webkit (para Ipad debería hacer – que todavía no tiene uno): Pero en la actualidad no funciona en firefox 3.6.13 … Que probablemente se debe a que tipo de contenido es «Content-Type: text/html» … bajo las estrictas reglas de xml xmlns necesita ser definida. <!DOCTYPE html> no se aplica estrictas reglas de xml sin embargo firefox 3.6.13, lamentablemente, todavía no se render <!DOCTYPE html> en línea svg. … mediante el uso de code.google.com/chrome/chromeframe también funciona en Internet Explorer
    • Sé que en teoría debería funcionar en cualquier navegador webkit si funciona en uno. Simplemente no. Me cambié todo lo que la rodea en otra página de mi dominio principal para probar todas las diferentes opciones que usted ha presentado, y ninguno funciona. Lo único que parece funcionar es la generación de la post-carga a través de JavaScript. Me he dejado la página original solo, así que todavía coincide con la pregunta original.
    • No pude conseguir este para cargar un iPhone incluso con JS post-carga. Alguna pista?
    • El ‘independiente’ poco parece ser bastante importante: mis imágenes con svg fuentes donde conseguir aplastado cuando se cambia la src atributo con jQuery en un iPad 1. La adición de ‘independiente’ resuelto esto.
    • Safari puede utilizar webkit, el mismo que Chrome & Opera, Safari pero también es Mac & funciona de manera muy distinta, como la Ópera. Sólo porque trabaja en una webkit, no siempre significa que funciona en otro.

  2. 7

    Pensé que sería tack esta aquí, aunque es más que nada relacionados con el título.

    Yo tenía mi SVG etiqueta de representación en todo correctamente en todos los navegadores (incluso IE9+), excepto para iOS. Tuve la css altura de la svg al 100%, que trabajó en todas partes, pero en iOS parecía ser el 100% de la altura de toda la página, en lugar de su elemento padre! Esto provocaba en mi interior SVG elementos para procesar fuera de su área de visualización.

    La adición de un position: absolute para el svg de la etiqueta de solucionado mi problema y se vean correctamente en iOS y en todas partes (el elemento principal ya estaba colocado, así que eso no cambie la posición real de la svg). Otra posición estilos también pueden trabajar.

    • Yo tenía un problema similar al tuyo. El mío era simplemente resuelto con la adición de un «position: relative» para ambos, los padres y el contenedor de la svg.
    • El problema es la falta de posicionamiento contexto de los padres de la región. La mayoría de los navegadores tienden a la cascada de posicionamiento contexto como predeterminado, pero parece que iOS no funciona, al menos para SVG. Tan pronto como usted dar a su padre un poco de contexto (sea ‘relativa’, ‘absoluta’ o ‘static’), se reconoce lo que las dimensiones de su contexto y, a continuación, puede correctamente se relacionan con el 100% de los padres. Más sobre posicionamiento css aquí: alistapart.com/article/css-positioning-101
  3. 5

    He tenido este problema antes de que demasiado con mobile Safari. Lo que puedes hacer es cargar el archivo SVG en el DOM mediante javascript:

    $(document).ready(function(){
        var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
        var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));
    
        $('body').html(chart);
    );

    Que es sólo un ejemplo – obviamente no vas a la tienda de su SVG en una cadena, como en la práctica.

    Usted podría recuperar el SVG de la cadena desde el servidor a través de ajax, y luego se carga en el DOM utilizando el enfoque anterior, si quería.

  4. 1

    Mezcla SVG etiquetas con las etiquetas HTML sin el uso de un bien formado documento XHTML y espacios de nombres (ver Wayne de la respuesta) no se admite en Safari para iOS 4.2.1 y anteriores, ni es compatible con Safari 5.0.x y versiones anteriores de Mac OS X y Windows.

    Incluyendo SVG etiquetas dentro de un documento HTML es una nueva característica de HTML5 analizadores. Si usted descargar y ejecutar un nightly build de WebKit para Mac OS X o Windows, verás que tu caso de prueba funciona como se esperaba.

    • No es el iPhone supone que para ser plenamente HTML5 compatible, o es de los nativos SVG procesamiento no forma parte del estándar HTML5?
    • HTML5 es todavía un borrador de la especificación en este punto (a ser completado en 2014, al parecer), por lo que «HTML5 compatible» es un término casual. El móvil del navegador de safari es compatible con algunas características de HTML5, pero no en otros. En línea SVG es parte de HTML5 proyecto de especificación, pero aún no está incluido en el móvil del navegador safari. Ejemplos de partes de la especificación de que están incluidos en la actualidad son HTML5 etiquetas de audio y vídeo.
  5. 0

    Incluso con todos los otros consejos en esta página, no podía llegar a su trabajo (incluso en Safari).

    Así que he encontrado un ejemplo de trabajo en:

    http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg

    y copiado el archivo a mi propio sitio. No ha habido suerte, así que eché un vistazo a ese archivo y mi propio mediante Rex Swain HTTP del visor:

    http://www.rexswain.com/httpview.html

    La diferencia se hizo evidente. Mi svg estaba siendo servido como texto/html, y el logotipo de Starbucks estaba siendo servido como image/svg+xml.

    La solución fue cambiar el encabezado de la adición:

    addtype image/svg+xml .svg

    a el .archivo htaccess.

  6. 0

    han tratado de integrar dentro de un <object> etiqueta.

    <object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>

    e.g

    <object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>

    Creo que debería hacer el truco!

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...