1. Zuhause
  2. Frage und Antwort
  3. Mobile Safari SVG Problem

Mobile Safari SVG Problem

2010-12-21 16 views
29

Ich versuche, ein SVG-Bild auf meinem iPhone (oder iPad) Standard-Browser angezeigt zu bekommen, aber ich kann nicht scheinen, auch nur ein Rect zu bekommen.Mobile Safari SVG Problem

Beispiel an: http://www.invalidpage.com/svg/svgtest.html

Quelle:

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

Quelle

2010-12-21 Nathan Wheeler

Antwort

35

xmlns="http://www.w3.org/2000/svg" version="1.1" zu Ihrem svg-Tag hinzufügen.

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

Der HTTP MIME-Typ durch http://www.invalidpage.com/svg/svgtest.html geliefert ist "Content-Type: text/html". HTML-Inline-Svg funktioniert mit dem MIME-Typ "Content-Type: text/xml" Sie können dies erstellen, indem Sie das Dokument mit XML anstelle von HTML beenden, wie sie done here haben.

Nicht sicher, ob Ipad sich um die Content-Type kümmert, aber andere Browser tun.

Aktualisiert

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

auch verwendet werden kann; Es ist, was auf den Ipad Svg Beispielen gezeigt wird. Wenn das Dokument als XML und nicht als HTML ausgeliefert wird, sollte es mit <xml version="1.0" standalone="no"> starten;

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

Quelle

2010-12-22 18:49:02 Wayne

+0

Eigentlich so, wie es ist es auf alles außer dem iPad/iPhone funktioniert, soweit ich das beurteilen kann. Ich habe RaphaelJS angeschlossen und es funktioniert jetzt auch auf iOS. Ich habe auch versucht, die Xmlns und Version Attribute, das gleiche Ergebnis, funktioniert überall außer iOS. –

+0

Es rendert in Chrome, die Webkit-Engine verwendet (so sollte Ipad rendern - ich habe noch keinen): Aber nicht derzeit in Firefox 3.6.13 ... Das ist wahrscheinlich, weil Inhaltstyp ist "Content-Type: Text/html "... unter strikten XML-Regeln muss xmlns definiert werden. wendet keine strikten XML-Regeln an, aber Firefox 3.6.13 rendert leider immer noch nicht inline svg. ... mit http://code.google.com/chrome/chromeframe/ funktioniert es auch im Internet Explorer – Wayne

+0

Ich weiß, dass es theoretisch in jedem Webkit-Browser funktionieren sollte, wenn es in einem funktioniert. Es tut es einfach nicht. Ich habe das ganze Zeug auf einer anderen Seite meiner primären Domain umgeblättert, um all die verschiedenen Optionen zu testen, die Sie vorgestellt haben, und keine funktionieren.Das einzige, was zu funktionieren scheint, ist das Erzeugen von Post-Load durch JavaScript. Ich habe die Originalseite alleine gelassen, damit sie immer noch mit der ursprünglichen Frage übereinstimmt. –

1

Mixing SVG-Tags mit HTML-Tags ohne einen wohlgeformten XHTML-Dokument und Namespaces (siehe Wayne Antwort) nicht in Safari für iOS 4.2.1 und früheren Versionen unterstützt, noch unterstützt es in Safari 5.0.x und früher unter Mac OS X und Windows.

Das Einfügen von SVG-Tags in ein HTML-Dokument ist eine neue Funktion von HTML5-Parsern. Wenn Sie eine nightly build of WebKit für Mac OS X oder Windows herunterladen und ausführen, sehen Sie, dass Ihr Testfall wie erwartet funktioniert.

Quelle

2011-01-07 17:20:20 ddkilzer

+0

Soll das iPhone nicht vollständig HTML5-kompatibel sein oder ist die native SVG-Verarbeitung nicht Teil des HTML5-Standards? –

+0

@ md5sum: HTML5 ist immer noch eine Entwurfsspezifikation an diesem Punkt (offensichtlich im Jahr 2014 abgeschlossen), so "HTML5-konform" ist ein lockerer Begriff. Der mobile Safari-Browser unterstützt einige Funktionen von HTML5, andere jedoch nicht. Inline-SVG ist Teil der HTML5-Entwurfsspezifikation, ist jedoch noch nicht im Browser für mobile Safari enthalten. Beispiele für Teile der Spezifikation, die derzeit enthalten sind, sind HTML5-Audio- und Video-Tags. – jbeard4

5

I h Ave hatte dieses Problem auch schon mit Mobile Safari. Was Sie tun können, ist die SVG in das DOM über Javascript laden:

$(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); 
);

Das ist nur ein Beispiel ist - offensichtlich sind Sie nicht wie das in der Praxis gehen, um Ihre SVG in einer Zeichenfolge zu speichern.

Sie könnten die SVG-Zeichenfolge vom Server über Ajax abrufen und dann mit dem obigen Ansatz in das DOM laden, wenn Sie möchten.

Quelle

2011-10-02 21:10:19 asgeo1

0

haben Sie versucht, es in ein Tag einzubetten.

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

beispiels

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

Ich denke, das den Trick tun sollte!

Quelle

2013-12-31 06:42:10

7

Dargestellt würde ich das hier anheften, obwohl es meistens nur mit dem Titel zusammenhängt.

Ich hatte meine SVG-Tag-Rendering alles ordnungsgemäß in jedem Browser (sogar IE9 +), außer für iOS. Ich hatte die CSS-Höhe des SVG auf 100% gesetzt, was überall funktionierte, aber auf iOS schien es 100% der Höhe der gesamten Seite zu sein, anstatt nur sein Elternelement! Dies führte dazu, dass meine inneren SVG-Elemente außerhalb ihres Ansichtsfensters gerendert wurden.

Durch Hinzufügen eines position: absolute zum svg-Tag wurde mein Problem behoben und es wurde ordnungsgemäß auf iOS und überall sonst gerendert (das Elternelement wurde bereits positioniert, sodass die tatsächliche Position des Svg nicht geändert wurde). Andere Positionsstile funktionieren möglicherweise ebenfalls.

Quelle

2014-05-27 17:57:18

+1

Ich hatte ein ähnliches Problem wie Ihres. Meins wurde einfach gelöst mit dem Hinzufügen einer "position: relativ" zum Elternteil und zum Container des SVG. –

+1

Das Problem ist das Fehlen des Positionierungskontextes der Region des Elternteils. Die meisten Browser tendieren dazu, den Positionierungskontext als Standard zu kaskadieren, aber das scheint zumindest für SVG nicht zu funktionieren. Sobald Sie seinem Elternteil einen Kontext geben (sei es "relativ", "absolut" oder "statisch"), erkennt er dann, was die Dimensionen seines Kontextes sind - und dann kann er sich korrekt auf die 100% der beziehen Elternteil. Mehr über css Positionierung hier: http://alistapart.com/article/css-positioning-101 –

0

Auch mit all den anderen Ratschlägen auf dieser Seite konnte ich es nicht zum Laufen bringen (sogar in Safari).

So fand ich ein funktionierendes Beispiel an:

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

und kopiert die Datei auf meiner eigenen Website. Noch kein Glück, so hatte ich einen Blick auf die Datei und meine eigene Rex Swain HTTP-Viewer:

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

Der Unterschied wurde deutlich. Mein Svg wurde als Text/html serviert, und das Starbucks-Logo wurde als image/svg + xml serviert.

Die Lösung war die Header zu ändern, indem das Hinzufügen:

addtype image/svg+xml .svg

in die .htaccess-Datei.

Quelle

2014-07-18 08:36:12

2

Ich hatte auch ein Problem, große SVGS (Dimensionen) in IOS-Browsern anzuzeigen. Indem ich es herunterskalierte, habe ich es zur Arbeit gebracht.

Ich denke um 1000px und down wird es tun .. Ein Freund von mir erzählte mir, es hätte vielleicht etwas mit Integer Limits für IOS.

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

Quelle

2014-10-02 07:52:47 Steffan

+0

Vielen Dank. Es hat mir geholfen. – Qwertiy

Verwandte Themen

 Verwandte Themen