Mobile Safari SVG problème
J'essaie d'obtenir une image SVG pour apparaître sur mon navigateur par défaut iPhone (ou iPad), mais je n'arrive pas à obtenir même un rect pour apparaître.
Exemple à: http://www.invalidpage.com/svg/svgtest.html
Source:
<!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>
8 réponses
Ajoutez xmlns="http://www.w3.org/2000/svg" version="1.1" à votre balise 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>
Le type MIME HTTP fourni par http://www.invalidpage.com/svg/svgtest.html est
"Content-Type: text/html". HTML inline svg fonctionne avec le type MIME "Content-Type: text/xml" Vous pouvez créer ceci en terminant le document avec XML au lieu de HTML comme ils l'ont fait ici.
Je ne sais pas si L'Ipad se soucie du Content-Type mais d'autres navigateurs le font.
mise à Jour
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Peut également être utilisé; c'est ce qui est montré sur les exemples svg Ipad. Lorsque le document est livré en tant que XML Pas HTML, il devrait commencer par <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>
Je me suis dit que je ferais ça ici, bien que ce soit principalement lié au titre.
J'ai eu ma balise SVG rendant tout correctement dans chaque navigateur (même IE9+), sauf pour iOS. J'avais la hauteur css du svg définie sur 100%, ce qui fonctionnait partout, mais sur iOS, il semblait être 100% de la hauteur de la page entière, au lieu de simplement son élément parent! Cela provoquait le rendu de mes éléments SVG internes en dehors de leur fenêtre d'affichage.
L'ajout d'un position: absolute à la balise svg a corrigé mon problème et il a rendu correctement sur iOS et partout ailleurs (l'élément parent était déjà positionné, donc cela n'a pas changé la position réelle du svg). D'autres styles de position peuvent également fonctionner.
J'ai déjà eu ce problème avec Mobile Safari. Ce que vous pouvez faire est de charger le SVG dans le DOM via 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);
);
C'est juste un exemple - évidemment, vous n'allez pas stocker votre SVG dans une chaîne comme ça en pratique.
Vous pouvez récupérer la chaîne SVG du serveur via ajax, puis Charger dans le DOM en utilisant l'approche ci-dessus si vous le souhaitez.
J'ai également eu un problème d'affichage de gros SVG (dimensions) dans les navigateurs IOS. En le réduisant, Je l'ai fait fonctionner.
Je pense que autour de 1000px et vers le bas le fera.. Un de mes amis m'a dit qu'il avait peut-être quelque chose avec des limites entières pour IOS.
Mélanger des balises SVG avec des balises HTML sans utiliser un document XHTML bien formé et des espaces de noms (voir la réponse de Wayne) n'est pas pris en charge dans Safari pour iOS 4.2.1 et versions antérieures, ni dans Safari 5.0.x et versions antérieures sur Mac OS X et Windows.
L'inclusion de balises SVG dans un document HTML est une nouvelle fonctionnalité des analyseurs HTML5. Si vous téléchargez et exécutez unenightly build de WebKit pour Mac OS X ou Windows, vous verrez que votre cas de test fonctionne comme prévu.
Je recommande de jeter un oeil aux exemples ici pour savoir comment commencer avec SVG:
Http://croczilla.com/bits_and_pieces/svg/samples/
Voici quelques exemples simples qui illustrent comment inclure du contenu SVG en ligne dans XHTML:
Http://croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml
Http://croczilla.com/bits_and_pieces/svg/samples/dom2/dom2.xml
Avez-vous essayé de l'intégrer dans une balise.
<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>
Par exemple
<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>
Je pense que cela devrait faire l'affaire!
Même avec tous les autres conseils sur cette page, je ne pouvais pas le faire fonctionner (même dans Safari).
J'ai donc trouvé un exemple de travail à:
Http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg
Et copié le fichier sur mon propre site. Toujours pas de chance, alors j'ai regardé ce fichier et le mien en utilisant la visionneuse HTTP DE Rex Swain:
Http://www.rexswain.com/httpview.html
La différence est devenue évidente. Mon svg était servi en tant que texte / html , et le logo Starbucks était servi comme image / svg + xml .
La solution était de changer l'en-tête en ajoutant:
addtype image/svg+xml .svg
À la .fichier htaccess.