web-dev-qa-db-fra.com

Problème SVG Safari mobile

J'essaie de faire apparaître une image SVG sur le navigateur par défaut de mon iPhone (ou de mon iPad), mais je n'arrive pas à obtenir un simple recto. 

Exemple à: http://www.invalidpage.com/svg/svgtest.html

La 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>
iphonesvgmobile-safari
31
Nathan Wheeler

Ajoutez xmlns="http://www.w3.org/2000/svg" version="1.1" à votre tag 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 remis 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 le créer en terminant le document avec XML au lieu de HTML comme ils l’ont fait done here .

Je ne sais pas si Ipad se soucie du Content-Type, mais les autres navigateurs le sont.

Mis à jour

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

Peut aussi être utilisé C'est ce qui est montré sur les exemples de svg Ipad. Lorsque le document est livré au format XML et non HTML, il doit 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>
40
Wayne

Je pensais que je pourrais ajouter ça ici, bien que ce soit principalement lié au titre.

Mon tag SVG rendait tout correctement dans tous les navigateurs (même IE9 +), sauf iOS. J'avais la hauteur CSS du svg réglée à 100%, ce qui fonctionnait partout, mais sur iOS, elle semblait correspondre à 100% de la hauteur de la page entière, au lieu de son élément parent! Cela provoquait le rendu de mes éléments SVG internes en dehors de leur fenêtre de visualisation.

L'ajout d'un position: absolute à la balise svg a corrigé mon problème et l'a rendu correctement sur iOS et partout ailleurs (l'élément parent était déjà positionné, donc cela n'a pas modifié la position réelle du svg). D'autres styles de poste peuvent également fonctionner.

7
Aaron Krauss

J'ai déjà eu ce problème aussi avec Safari mobile. 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);
);

Ce n'est qu'un exemple - vous n'allez évidemment pas stocker votre fichier SVG dans une chaîne comme celle-ci.

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.

5
asgeo1

J'ai également eu un problème d'affichage de grandes SVGS (dimensions) dans les navigateurs IOS. En le réduisant, je l'ai obtenu au travail.

Je pense qu’environ 1000px et le bas le feront .... Un de mes amis m’a dit qu’il avait peut-être quelque chose à faire avec Integer Limits pour IOS.

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

2
Steffan

Le mélange de 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 sous Mac OS X. Les fenêtres.

L'inclusion de balises SVG dans un document HTML est une nouvelle fonctionnalité des analyseurs HTML5. Si vous téléchargez et exécutez une version nocturne de WebKit pour Mac OS X ou Windows, vous verrez que votre scénario de test fonctionne comme prévu.

1
ddkilzer

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!

0
Mohammad Faizan

Je vous recommande de consulter les exemples ci-dessous pour savoir comment utiliser 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

0
jbeard4

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 sur:

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 jeté un œil à ce fichier et au mien en utilisant l'afficheur HTTP de Rex Swain:

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

La différence est devenue évidente. Mon svg était utilisé comme texte/html et le logo Starbucks était servi comme image/svg + xml.

La solution consistait à changer l'en-tête en ajoutant:

addtype image/svg+xml .svg

au fichier .htaccess.

0
Andrew Swift