Mobile Safari SVG Problème
Je vais essayer d'obtenir une image SVG sur mon iPhone (ou iPad) navigateur par défaut, mais je n'arrive pas à obtenir encore un rect de montrer.
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>
- Je vous recommande de prendre un coup d'oeil aux exemples ici pour savoir comment obtenir commencé avec SVG: croczilla.com/bits_and_pieces/svg/samples Voici quelques exemples simples qui illustrent comment inclure le contenu SVG en XHTML: croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml croczilla.com/bits_and_pieces/svg/samples/dom2/dom2.xml
Vous devez vous connecter pour publier un commentaire.
Ajouter
xmlns="http://www.w3.org/2000/svg" version="1.1"
à votre balise svg.Le HTTP de type MIME, livrée par
http://www.invalidpage.com/svg/svgtest.html
est"Content-Type: text/html"
. En ligne HTML svg fonctionne avec le type MIME"Content-Type: text/xml"
Vous pouvez créer cette fin, le document XML au lieu de HTML comme ils l'ont fait ici.Ne sais pas si l'Ipad se soucie de la
Content-Type
mais les autres navigateurs n'.Mis à jour
Peut également être utilisé; C'est ce qui est montré sur l'Ipad svg exemples. Lorsque le document est à l'initiative d'un XML non pas en HTML, il doit commencer par
<xml version="1.0" standalone="no">
;src
attribut avec jQuery sur un iPad 1. L'ajout de 'autonome' réglé ce problème.Pensé que j'ai tack ce ici, mais c'est surtout liée à la propriété.
J'ai eu mon SVG tag de rendu tout correctement dans tous les navigateurs (même IE9+), sauf pour iOS. J'ai eu le css de la hauteur de la svg à 100%, qui a travaillé un peu partout, mais sur iOS, il est apparu à 100% de la hauteur de l'intégralité de la page, au lieu de son élément parent! C'était la cause de mes intérieure SVG éléments pour rendre à l'extérieur de leur fenêtre d'affichage.
L'ajout d'un
position: absolute
à la balise svg fixé mon problème et elle a rendu correctement sur iOS et partout ailleurs (le parent de l'élément a été déjà placé, de sorte que cela ne change pas la position réelle de la svg). Autre position styles peuvent aussi travailler.J'ai eu ce problème avant de trop avec le navigateur Safari mobile. Ce que vous pouvez faire est de charger le SVG dans le DOM via javascript:
C'est juste un exemple - de toute évidence, vous n'allez pas stocker vos SVG dans une chaîne de caractères comme dans la pratique.
Vous pouvez récupérer la chaîne SVG à partir du serveur via ajax, et ensuite les charger dans les DOM à l'aide de l'approche ci-dessus si vous voulez.
J'ai également eu un problème d'affichage de grande SVGS (dimensions) dans les navigateurs IOS. Par le passage à l'échelle vers le bas, je ne le faire fonctionner.
Je pense autour de 1000px et le bas va le faire..
Un ami à moi m'a dit qu'il avait peut-être quelque chose avec Entier Limites pour IOS.
http://msdn.microsoft.com/en-us/library/7fh3a000.aspx
Mélange balises SVG avec des balises HTML sans l'aide d'un bien formé document XHTML et les espaces de noms (voir Wayne réponse) n'est pas pris en charge dans Safari pour iOS 4.2.1 et les versions antérieures, il n'est ni pris en charge dans Safari 5.0.x et versions antérieures à Mac OS X et Windows.
Y compris les balises SVG dans un document HTML est une nouvelle fonctionnalité de HTML5 analyseurs. Si vous téléchargez et exécutez un nightly build de WebKit pour Mac OS X ou Windows, vous verrez que votre cas de test fonctionne comme prévu.
Même avec tous les autres avis sur cette page, je ne pouvais pas le faire fonctionner (même dans Safari).
Donc j'ai 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, j'ai donc eu un coup d'oeil à ce fichier et de mon propre à l'aide de Rex Swain HTTP viewer:
http://www.rexswain.com/httpview.html
La différence devient évidente. Mon svg a été servi en tant que texte/html, et la logo Starbucks a servi en tant qu'image/svg+xml.
La solution a été de changer l'en-tête en ajoutant:
à l' .fichier htaccess.
avez-vous essayé de l'intégrer à l'intérieur d'un
<object>
tag.e.g
Je pense que cela devrait faire l'affaire!