Ich habe Probleme mit Google Chrome, das SVG nicht mit einem IMG-Tag rendert. Dies geschieht beim Aktualisieren der Seite und beim ersten Laden der Seite. Ich kann das Bild anzeigen lassen, indem ich "Element überprüfen", dann mit der rechten Maustaste auf die SVG-Datei klicke und die SVG-Datei in einem neuen Tab öffne. Das SVG-Bild wird dann auf der Originalseite gerendert.
<img src="../images/Aged-Brass.svg">
Völlig ratlos, was das Problem ist. Das SVG-Bild wird in IE9 und FF gut wiedergegeben, nur nicht in Chrome oder Safari.
Ich habe auch meine MIME-Typen eingestellt. (image / svg + xml)
BEARBEITEN: Hier ist eine einfache HTML-Seite, die ich erstellt habe, um mein Problem zu veranschaulichen.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
Wie Sie sehen können, versuche ich, eine SVG-Datei sowohl in einem IMG-Tag als auch in CSS als Hintergrundbild zu verwenden. Weder arbeiten beim ersten Laden der Seite in Chrome noch in Safari. Wenn ich das Element inspiziere, klicken Sie mit der rechten Maustaste auf svg oder klicken Sie auf den Link, um svg in ein anderes Fenster zu laden. Die svg-Datei wird auf der ursprünglichen Registerkarte gerendert.
quelle
Antworten:
Ein einfacher und einfacher Weg; Laut https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ müssen Sie die .SVG-Datei mit einem Texteditor (wie Notepad) öffnen und ändern
zu:
es hat bei mir funktioniert!
quelle
Das svg-Tag benötigt das Namespace-Attribut xmlns:
quelle
Ich kam hierher, weil ich das gleiche Problem hatte, wenn ich das Element inspiziere, kann ich die Datei sehen, aber auf der Site kann ich nicht (selbst wenn ich localhost benutze)
Die Antwort auf mein Problem war das Speichern der SVG-Datei. Wenn Sie es vom Illustrator gespeichert haben, klicken Sie auf "Einbetten" und nicht auf "Verknüpfen". Als Link wird nur auf Ihre lokalen Dateien verwiesen, anstatt die Daten einzuschließen (wenn ich es richtig verstehe).
Ich habe darüber auf der Adobe-Website gelesen, die einige andere nützliche Tipps zum Exportieren enthält: http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
Das hat bei mir funktioniert, hoffe es war nützlich.
quelle
Ich bin hierher gekommen, weil ich ein ähnliches Problem hatte, das Bild wurde nicht gerendert. Was ich herausfand, war, dass der Inhaltstyp-Header meines Testservers nicht korrekt war. Ich habe das Problem behoben, indem ich meiner .htaccess-Datei Folgendes hinzugefügt habe:
quelle
image/svg
die Datei zum Herunterladen angeboten wird, muss es haben+xml
.Verwenden Sie
<object>
stattdessen (natürlich ersetzen Sie jede URL durch Ihre eigene):quelle
Das Hinzufügen des width-Attributs zum [svg] -Tag (durch Bearbeiten des svg-Quell-XML) hat bei mir funktioniert: z.
quelle
Ich konnte Ihr Beispiel verwenden, um eine Testseite zu erstellen, und es hat einwandfrei funktioniert. Ich gehe davon aus, dass mit Ihrer SVG-Datei etwas nicht stimmt. Können Sie das auch hier einfügen? Hier ist das Beispiel, das ich verwendet habe.
quelle
sieht aus wie ein Chrome-Bug, ich habe etwas anderes gemacht, da ich deswegen fast verrückt geworden bin ... mit Chrom-Debugger, wenn Sie die CSS des SVG-Objekts ändern, das auf dem Bildschirm angezeigt wird.
Also habe ich Folgendes getan: 1. Überprüfen Sie die Bildschirmgröße. 2. Hören Sie sich das "Laden" -Ereignis meines SVG-Objekts an. 3. Wenn das Element geladen wird, ändere ich sein CSS mit jQuery. 4. Es hat den Trick für mich getan
quelle
Ich hatte ein ähnliches Problem und die vorhandenen Antworten darauf waren entweder nicht zutreffend oder funktionierten, aber wir konnten sie aus anderen Gründen nicht verwenden. Also musste ich herausfinden, was Chrome an unseren SVGs nicht mochte.
In unserem Fall stellte sich heraus, dass das
id
Attribut dessymbol
Tags in der SVG-Datei ein enthält:
, was Chrome nicht gefallen hat. Sobald ich das entfernt habe:
, funktionierte es gut.Schlecht:
Gut:
quelle
.svg
Das Bild hat nicht die anfängliche Höhe und Breite. Daher ist es nicht sichtbar. Du musst es einstellen.Sie können entweder inline oder in CSS-Datei tun:
In der Reihe:
CSS-Datei:
quelle
Ich habe mein SVG zunächst aus Photoshop CC exportiert und musste es manuell hinzufügen
version="1.1"
in das<svg>
Tagum es auf Chrom zu zeigen.
quelle
In meinem Fall blieb dieses Problem bestehen, als ich das SVG mit Photoshop erstellte und speicherte. Was half, war das Öffnen der Datei mit Illustrator und das anschließende Exportieren des SVG.
quelle
Hatte das gleiche Problem. Wenn der Server richtig konfiguriert ist und .htacces nicht die Antwort ist, möchten Sie möglicherweise die eingebettete SVG-Quelle anzeigen. Meine wurden mit einem Texteditor erstellt, der in Chrome & Safari im HTML5-Code gut gerendert wurde. Nach dem Einbetten war nichts sichtbar. Dem SVG-Code wurde die richtige Version, die richtigen Abmessungen usw. hinzugefügt und funktioniert wie ein Zauber. Auch alle Stile inline.
Dh
quelle
Ich habe auch das gleiche Problem mit Chrom, nachdem es hinzugefügt wurde
DOCTYPE
, funktioniert es wie erwartetVor
Nach dem
quelle
Achten Sie darauf, dass Sie keine CSS- Übergangseigenschaft für Ihre SVG-Bilder haben
Ich weiß jetzt nicht warum, aber wenn Sie Folgendes tun: "Übergang: Alle erleichtern 0,3 Sekunden" für SVG-Bilder in Chrome werden die Bilder nicht angezeigt
z.B:
Chrome rendert kein SVG.
Entfernen Sie alle CSS-Übergangseigenschaften und versuchen Sie es erneut
quelle
Versuchen Sie bei Problemen, die Bilder zuerst mit einem Programm zu öffnen, das SVG-Bilder lesen kann.
Wenn dies fehlschlägt, ist das SVG-Image irgendwie beschädigt.
Ich hatte diesen Fall und kopierte die SVG-Pfade in ein neues SVG-Bild und passte alle Details der SVG-Tags an.
Ich habe nie den Grund getestet, warum es nicht gerendert wurde, aber angenommen, dass einige unsichtbare Sonderzeichen den Renderfehler verursacht haben. Manchmal Dateien auf dem Mac bearbeiten Ich hatte dieses Problem bereits in einem anderen Kontext.
quelle
Ich hatte das gleiche Problem mit einem SVG-Bild, das über das IMG-Tag enthalten war. Es stellte sich für mich heraus, dass Chrome es nicht mochte, wenn eine leere Zeile direkt oben in der Datei stand.
Ich habe die leere Zeile entfernt und mein SVG hat sofort mit dem Rendern begonnen.
quelle
Ich stelle sicher, dass ich den Stil des Bildes hinzufüge . Es hat bei mir funktioniert
style= "width:320; height:240"
quelle
Der Inhaltstyp im HTTP-Header vom Server war für mich das Problem. Ich habe einen node.js-Server, hinzugefügt:
Seitenname ist meine lokale Variable für das, was angefordert wird.
Ich vermute, das ist ein häufiges Problem! Ich verwende die aktuelle Version von Chrome (März 2020).
quelle
quelle