Warum funktioniert diese SVG im Browser, aber nicht auf einer Webseite?

This SVG kann in meinem Browserfenster korrekt angezeigt werden.Warum funktioniert diese SVG im Browser, aber nicht auf einer Webseite?

aber wenn ich versuche, es als Bild auf einer Webseite zu verwenden (versucht, dies auf meiner Live-Website und in JSFiddle), es wird nicht angezeigt:

<img src="http://54.186.131.77/Style/Resources/SVG/logo.svg"/>

Jeden Zeit, mein Server behauptet, dass die Datei erfolgreich geliefert wurde, aber es wird nicht gerendert.

Was ist das Problem?

Im Falle denken Sie mein Problem meine Portion Methode/MIME-Typen beinhalten könnte, I've created a Gist with my Node.js custom server implementation. ich behandeln .svg als text/xml nach welchem Plan verwendet, wenn diese Server vor einiger Zeit zu entwickeln.

Quelle

2015-07-31 Anonymous

Haben Sie versucht, MIME-Typen zu setzen, und was läuft auf der Serverseite? http://stackoverflow.com/questions/27338648/svg-wont-display Apache Anweisungen - http://planetsvg.com/tools/mime.php#apache – Mousey

@Mousey Ich werde Ihnen zeigen, wie mein Server MIME verarbeiten Arten. –

@Mousey es ist zu viel Code, um diese Frage zu verwirren, da ich nicht weiß, welcher Teil problematisch sein könnte, um ... [schnipsel] ... ', also hier ist es in einem Gist: https: // gist .github.com/anonymous/a39603f3ee74694e8186 –

Die Content-type Antwort-Header, wenn ich das svg von Ihrem Server laden ist derzeit Content-Type:text/xml, die ein falscher MIME-Typ für SVG ist. Versuchen Sie, Ihre Content-type Kopfzeile zu image/svg+xml zu ändern.

Vom Kern Sie in Ihrem Kommentar geschrieben, es sieht aus wie Sie in der Lage sein wird, dies zu tun durch die Linie 15 ändert:

'.svg' : 'text/xml',

'.svg' : 'image/svg+xml',

ich gegen nur die Änderung empfehlen würde das Markup, weil das nur eine kurzfristige Lösung für die falschen HTTP-Header ist.

Quelle

2015-07-31 22:26:58

Ich habe tatsächlich den Inhaltstyp geändert, wie Sie gesagt haben, und lud den Server neu, lud die Seite mit deaktiviertem Cache neu - Problem wurde nicht gelöst -, aber sicher, ist es möglich, den Inhaltstyp zu überprüfen, der über Javascript bedient wird, damit ich es wissen kann wird der MIME-Typ sicher richtig bedient? –

@ JonathanTodd Ich habe es erneut überprüft und es sieht so aus, als ob der Inhaltstyp "text/svg-xml" ist - immer noch falsch. Um den Inhaltstyp zu überprüfen, gehen Sie zu [web-sniffer.net] (http://web-sniffer.net/) und schließen Sie Ihre SVG-URL an, so dass alles andere Standard bleibt. Überprüfen Sie dann den Abschnitt "HTTP Response Header" für einen "Content-Type" von "image/svg + xml". –

Ahh ich sehe. Dummer Fehler. –

Hier ist, wie ich es gemacht habe, mit einfachen alten HTML. Ich habe die Antwort in der SO-Link here verwendet, um es herauszufinden.

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Test page</title> 
</head> 
<body> 
    <object data="http://54.186.131.77/Style/Resources/SVG/logo.svg" type="image/svg+xml"> 
     <img src="http://54.186.131.77/Style/Resources/SVG/logo.svg" /> 
    </object> 
</body> 
</html>

Quelle

2015-07-31 22:26:30

Warum funktioniert diese SVG im Browser, aber nicht auf einer Webseite?

Antwort

Verwandte Themen