1. Inicio
  2. Pregunta y respuesta
  3. Mobile Safari Problema SVG

Mobile Safari Problema SVG

2010-12-21 34 views
29

Estoy tratando de obtener una imagen SVG para que aparezca en mi navegador predeterminado de iPhone (o iPad), pero parece que no puedo obtener siquiera un mensaje para mostrar.Mobile Safari Problema SVG

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>

Fuente

2010-12-21 Nathan Wheeler

Respuesta

35

Añadir xmlns="http://www.w3.org/2000/svg" version="1.1" a su etiqueta de SVG.

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

El tipo MIME HTTP entregado por http://www.invalidpage.com/svg/svgtest.html es "Content-Type: text/html". HTML en línea svg funciona con el tipo MIME "Content-Type: text/xml" Puede crear esto finalizando el documento con XML en lugar de HTML, ya que tienen done here.

No estoy seguro si Ipad se preocupa por el Content-Type pero otros navegadores sí.

Actualizado

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

también se puede utilizar; Es lo que se muestra en los ejemplos de Ipad svg. Cuando el documento se entrega como un XML no HTML, 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>

Fuente

2010-12-22 18:49:02 Wayne

+0

En realidad, la forma en que funciona es en todo excepto en el iPad/iPhone por lo que yo puedo decir. Conecté RaphaelJS y ahora también funciona en iOS. También probé los atributos xmlns y versión, el mismo resultado, funciona en todas partes excepto en iOS. –

+0

Se renderiza en Chrome que usa el motor webkit (por lo que Ipad debe representar, todavía no tengo uno): pero actualmente no funciona en Firefox 3.6.13 ... Es probable porque el tipo de contenido es "Content-Type: text/html "... bajo estrictas reglas xml xmlns necesita ser definido. no aplica reglas estrictas de xml, pero desafortunadamente Firefox 3.6.13 aún no representa inline svg. ... mediante el uso de http://code.google.com/chrome/chromeframe/ también funcionará en Internet Explorer – Wayne

+0

Sé que teóricamente debería funcionar en cualquier navegador webkit si funciona en uno. Simplemente no lo hace. Cambié todas las cosas en otra página en mi dominio principal para probar todas las diferentes opciones que ha presentado, y ninguna funciona.Lo único que parece funcionar es generarlo después de la carga a través de JavaScript. Dejé la página original solo para que coincida con la pregunta original. –

1

Mezcla etiquetas SVG con etiquetas HTML sin necesidad de utilizar un documento y espacios de nombres (véase la respuesta de Wayne) XHTML bien formado no se admite en Safari para iOS 4.2.1 y anteriores, ni es soportado en Safari 5.0.x y antes en Mac OS X y Windows.

La inclusión de etiquetas SVG dentro de un documento HTML es una nueva característica de los analizadores HTML5. Si descarga y ejecuta un nightly build of WebKit para Mac OS X o Windows, verá que su caso de prueba funciona como se esperaba.

Fuente

2011-01-07 17:20:20 ddkilzer

+0

¿No se supone que el iPhone es totalmente compatible con HTML5 o el procesamiento SVG nativo no forma parte del estándar HTML5? –

+0

@ md5sum: HTML5 sigue siendo una especificación de borrador en este momento (para completarse en 2014, al parecer), por lo que "compatible con HTML5" es un término flexible. El navegador Safari móvil admite algunas características de HTML5, pero no otras. Inline SVG es parte de la especificación borrador del HTML5, pero aún no está incluido en el navegador safari móvil. Ejemplos de partes de la especificación que se incluyen actualmente son etiquetas de audio y video HTML5. – jbeard4

5

I h ave también tuvo este problema antes con Safari móvil. Lo que puede hacer es cargar el SVG en el DOM a través de 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); 
);

eso es sólo un ejemplo - es obvio que no va a almacenar su SVG en una cadena como que en la práctica.

Puede recuperar la secuencia SVG del servidor a través de ajax, y luego cargarla en el DOM usando el enfoque anterior si así lo desea.

Fuente

2011-10-02 21:10:19 asgeo1

0

ha intentado incrustarlo dentro de una etiqueta.

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

por ejemplo

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

creo que esto debería hacer el truco!

Fuente

2013-12-31 06:42:10

7

Me figuré que lo abordaría aquí, aunque principalmente está relacionado con el título.

Tenía mi etiqueta SVG representando todo correctamente en cada navegador (incluso IE9 +), excepto para iOS. Tenía la altura de CSS de svg configurada al 100%, lo que funcionaba en todas partes, pero en iOS parecía ser el 100% de la altura de toda la página, en lugar de solo su elemento principal. Esto causaba que mis elementos SVG internos se renderizaran fuera de su ventana gráfica.

Agregar un position: absolute a la etiqueta svg solucionó mi problema y se procesó correctamente en iOS y en todas partes (el elemento padre ya estaba posicionado, por lo que esto no cambió la posición real del svg). Otros estilos de posición también pueden funcionar.

Fuente

2014-05-27 17:57:18

+1

Tuve un problema similar al tuyo. El mío simplemente se resolvió añadiendo una "posición: relativa" tanto al padre como al contenedor de la svg. –

+1

El problema es la falta de contexto de posicionamiento de la región de los padres. La mayoría de los navegadores tienden a poner en cascada el contexto de posicionamiento como predeterminado, pero parece que iOS no lo hace, al menos para SVG. Tan pronto como le dé a su padre un contexto (ya sea 'relativo', 'absoluto' o 'estático'), entonces reconoce cuáles son las dimensiones de su contexto, y entonces puede relacionarse correctamente con el 100% del padre. Más sobre el posicionamiento css aquí: http://alistapart.com/article/css-positioning-101 –

0

Incluso con todos los otros consejos en esta página no pude hacer que funcione (incluso en Safari).

así que encontré un ejemplo de trabajo en:

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

y copiar el archivo en mi propio sitio. Todavía no hay suerte, así que tuve un vistazo a ese archivo y mi propio espectador utilizando HTTP de Rex Swain:

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

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

La solución fue cambiar la cabecera añadiendo:

addtype image/svg+xml .svg

al archivo .htaccess.

Fuente

2014-07-18 08:36:12

2

También tuve un problema al mostrar grandes SVGS (dimensiones) en los navegadores IOS. Al reducirlo, conseguí que funcionara.

Creo que alrededor de 1000px y hacia abajo lo harán .. Un amigo mío me dijo que tal vez tenía algo con Integer Limits for IOS.

http://msdn.microsoft.com/en-us/library/7fh3a000.aspx

Fuente

2014-10-02 07:52:47 Steffan

+0

Gracias. Me ayudó. – Qwertiy

Cuestiones relacionadas

 Cuestiones relacionadas