it-swarm.com.de

Mobile Safari SVG-Problem

Ich versuche, ein SVG-Bild in meinem Standardbrowser für iPhone (oder iPad) anzuzeigen, aber ich kann nicht scheinen, dass auch nur ein Rect zu sehen ist. 

Beispiel unter: 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>
31
Nathan Wheeler

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

<!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 von http://www.invalidpage.com/svg/svgtest.html gelieferte HTTP-MIME-Typ lautet "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, da sie hier getan haben.

Nicht sicher, ob Ipad sich für den Content-Type interessiert, andere Browser jedoch.

Aktualisiert

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

Kann auch benutzt werden; Dies wird in den Ipad-SVG-Beispielen gezeigt. Wenn das Dokument als XML und nicht als HTML übermittelt wird, sollte es mit <xml version="1.0" standalone="no"> beginnen.

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

Ich dachte, ich würde das hier anpacken, obwohl es meistens nur mit dem Titel zusammenhängt.

Ich hatte mein SVG-Tag in allen Browsern (sogar IE9 +), mit Ausnahme von iOS, richtig dargestellt. Ich hatte die CSS-Höhe des SVG auf 100% gesetzt, was überall funktioniert hat, aber unter iOS schien es 100% der Höhe der gesamten Seite zu sein, anstatt nur das übergeordnete Element! Dadurch wurden meine inneren SVG-Elemente außerhalb ihres Ansichtsfensters gerendert.

Durch das Hinzufügen eines position: absolute zum svg-Tag wurde mein Problem behoben und unter iOS und an anderen Stellen richtig dargestellt (das übergeordnete Element war bereits positioniert, sodass die tatsächliche Position des svg nicht geändert wurde). Andere Positionsstile können ebenfalls funktionieren.

7
Aaron Krauss

Dieses Problem hatte ich auch schon mit Mobile Safari. Sie können das SVG über Javascript in das DOM 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 - Sie werden Ihre SVGs in der Praxis offensichtlich nicht in einer solchen Zeichenfolge speichern.

Sie können die SVG-Zeichenfolge über ajax vom Server abrufen und anschließend mit dem obigen Ansatz in das DOM laden, wenn Sie dies wünschen.

5
asgeo1

Ich hatte auch ein Problem mit der Anzeige großer SVGS (Dimensionen) in IOS - Browsern. Indem ich es verkleinerte, brachte ich es zum Laufen.

Ich denke, ungefähr 1000px und Down werden es tun ... Ein Freund von mir sagte mir, es hätte vielleicht etwas mit Integer Limits für IOS zu tun.

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

2
Steffan

Das Mischen von SVG-Tags mit HTML-Tags ohne Verwendung eines wohlgeformten XHTML-Dokuments und von Namespaces (siehe Waysons Antwort) wird in Safari für iOS 4.2.1 und früheren Versionen nicht unterstützt. In Safari 5.0.x und früheren Versionen von Mac OS X und Mac OS X wird dies nicht unterstützt Windows.

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

1
ddkilzer

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>

z.B

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

Ich denke, das sollte den Trick tun!

0
Mohammad Faizan

Ich würde empfehlen, sich die Beispiele hier anzusehen, um zu erfahren, wie Sie mit SVG loslegen können:

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

Hier einige einfache Beispiele, die zeigen, wie Inline-SVG-Inhalte in XHTML eingefügt werden können:

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

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

0
jbeard4

Trotz all der anderen Ratschläge auf dieser Seite konnte ich es (auch in Safari) nicht zum Laufen bringen.

So fand ich ein Arbeitsbeispiel an:

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

und kopierte die Datei auf meine eigene Site. Immer noch kein Glück, also habe ich mir diese Datei und meine eigene mit dem HTTP-Viewer von Rex Swain angesehen:

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

Der Unterschied wurde offensichtlich. Meine svg wurde als text/html und das Starbucks-Logo als image/svg + xml geliefert.

Die Lösung bestand darin, den Header zu ändern, indem Folgendes hinzugefügt wurde:

addtype image/svg+xml .svg

in die .htaccess-Datei.

0
Andrew Swift