iphone - professional - que es adobe flash
Problema de Mobile Safari SVG (8)
Estoy tratando de obtener una imagen SVG para que aparezca en mi navegador predeterminado de iPhone (o iPad), pero parece que ni siquiera puedo mostrar un mensaje.
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>
Agregue xmlns="http://www.w3.org/2000/svg" version="1.1" a su etiqueta 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 HTTP MIME 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 como lo han hecho aquí .
No estoy seguro de si Ipad se preocupa por el tipo de 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 puede ser usado; Es lo que se muestra en los ejemplos de Ipad svg. Cuando el documento se entrega como un XML que no es 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>
He tenido este problema antes también con Safari móvil. Lo que puedes 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);
);
Es solo un ejemplo: obviamente no vas a almacenar tu SVG en una cadena así en la práctica.
Podrías recuperar la cadena SVG del servidor a través de ajax, y luego cargarla en el DOM usando el enfoque anterior si así lo deseas.
Imaginé 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 una 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 de la svg). Otros estilos de posición también pueden funcionar.
Incluso con todos los otros consejos en esta página, no pude hacer que funcionara (incluso en Safari).
Así que encontré un ejemplo de trabajo en:
http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg
y copié el archivo a mi propio sitio. Todavía no tuve suerte, así que eché un vistazo a ese archivo y el mío usando el visor HTTP de Rex Swain:
http://www.rexswain.com/httpview.html
La diferencia se hizo obvia. Mi svg se estaba sirviendo como text / html , y el logotipo de Starbucks se servía como image / svg + xml .
La solución fue cambiar el encabezado agregando:
addtype image/svg+xml .svg
al archivo .htaccess.
Mezclar etiquetas SVG con etiquetas HTML sin usar un documento XHTML bien formado y espacios de nombres (ver la respuesta de Wayne) no es compatible con Safari para iOS 4.2.1 y versiones anteriores, ni es compatible con Safari 5.0.xy versiones anteriores 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 una compilación nocturna de WebKit para Mac OS X o Windows, verá que su caso de prueba funciona como se esperaba.
Recomiendo echar un vistazo a los ejemplos aquí para saber cómo comenzar con SVG:
http://croczilla.com/bits_and_pieces/svg/samples/
Aquí hay algunos ejemplos simples que ilustran cómo incluir contenido SVG en línea en XHTML:
http://croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml
http://croczilla.com/bits_and_pieces/svg/samples/dom2/dom2.xml
También tuve un problema al mostrar SVGS grandes (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.
has intentado incrustarlo dentro de una etiqueta.
<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>
p.ej
<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>
¡Creo que esto debería hacer el truco!