Mobile Safari SVG Problem

Ich versuche, das ein SVG-Bild zu zeigen, bis auf mein iPhone (oder iPad) Standard-browser, aber ich kann nicht scheinen, um auch nur ein rect zu zeigen.

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

InformationsquelleAutor der Frage Nathan Wheeler | 2010-12-21

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

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

Den HTTP-MIME-Typ ausgeliefert werden, die von http://www.invalidpage.com/svg/svgtest.html ist
"Content-Type: text/html". HTML-inline-svg arbeitet mit dem MIME-Typ "Content-Type: text/xml" können Sie erstellen, die diese durch die Endung des Dokuments mit XML statt HTML als Sie hier erledigt.

Nicht sicher, ob das Ipad kümmert sich um die Content-Type 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">

Kann auch verwendet werden; Es ist das, was angezeigt wird, ist auf dem Ipad svg-Beispiele. Wenn das Dokument liefert als XML kein HTML-Code, es sollte mit <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>

InformationsquelleAutor der Antwort Wayne

7

Dachte, ich würde tack dies hier, obwohl es meistens nur im Zusammenhang mit dem Titel.

Hatte ich meine SVG-tag Rendern alles korrekt in jedem browser (sogar IE9+), außer für iOS. Ich hatte die css-Höhe des svg auf 100% gesetzt, die überall funktioniert, aber auf iOS erschien es zu 100% der Höhe der gesamten Seite, statt nur zu seinem übergeordneten element! Dies wurde verursacht meine innere SVG-Elemente zu Rendern außerhalb Ihres Viewports.

Hinzufügen eines position: absolute dem svg-tag behoben, mein Problem und es richtig dargestellt, auf iOS und überall sonst (das übergeordnete element war bereits in Position, so dass Sie diese nicht ändern, wird die aktuelle position des svg). Die andere position-styles funktionieren auch.

InformationsquelleAutor der Antwort Aaron Krauss
5

Ich hatte dieses problem vorher auch mit dem mobilen Safari. Was Sie tun können, ist, laden Sie den SVG in der DOM über 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);
);
```
Das ist nur ein Beispiel - natürlich sind Sie nicht zum speichern von SVG in eine Zeichenfolge, so dass in der Praxis.

Konnte Sie abrufen die SVG-string vom server per ajax, und laden Sie dann in den DOM mit den oben erwähnten Ansatz, wenn Sie wollten.

InformationsquelleAutor der Antwort asgeo1
2

Hatte ich auch ein problem beim anzeigen von großen SVGS (Dimensionen) in der IOS-Browsern. Indem man es verkleinert, ich habe es zu arbeiten.

Ich denke, um 1000px und nach unten wird es tun..
Ein Freund von mir erzählte mir, dass es vielleicht etwas mit Integer-Grenzen für IOS.

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

InformationsquelleAutor der Antwort Steffan
1

Mischen SVG-tags mit HTML-tags ohne ein wohlgeformtes XHTML-Dokument und Namensräume (siehe Wayne ' s Antwort) ist nicht unterstützt in Safari für iOS 4.2.1 und früheren Versionen nicht unterstützt in Safari 5.0.x und früheren Versionen unter Mac OS X und Windows.

Einschließlich SVG-tags innerhalb eines HTML-Dokuments ist ein neues feature von HTML5-Parser. Wenn Sie herunterladen und ausführen eine nightly-build von WebKit für Mac OS X oder Windows, werden Sie sehen, dass Ihre test-Fall funktioniert wie erwartet.

InformationsquelleAutor der Antwort ddkilzer
0

Empfehle ich einen Blick auf die Beispiele hier für, wie, um loszulegen mit SVG:

http://croczilla.com/bits_and_pieces/svg/samples/

Hier sind einige einfache Beispiele, die illustrieren, wie inline-SVG-Inhalte in XHTML:

http://croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml

http://croczilla.com/bits_and_pieces/svg/samples/dom2/dom2.xml

InformationsquelleAutor der Antwort jbeard4

haben Sie versucht, die Einbettung innerhalb von einem tag.

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

e.g

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

Ich denke, das sollte den trick tun!

InformationsquelleAutor der Antwort Mohammad Faizan

0

Selbst mit all den anderen auf dieser Seite Tipps ich konnte es nicht zu funktionieren (auch in Safari).

So fand ich ein Beispiel an:

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

und kopiert die Datei auf meiner eigenen Website. Immer noch kein Glück, also ich hatte einen Blick auf die Datei und meiner eigenen mit Rex Swain ' s HTTP viewer:

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

Den Unterschied deutlich geworden. Meine svg wurde serviert, die als text/html, und die Starbucks-logo wurde, diente als image/svg+xml.

War die Lösung ändern Sie die Kopfzeile, indem Sie hinzufügen:
```
addtype image/svg+xml .svg
```
dem .htaccess-Datei.

InformationsquelleAutor der Antwort Andrew Swift

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.