Ich muss etwas falsch machen. Das Bild wurde vom Illustrator als SVG exportiert und (ich bin mir nicht sicher, ob das relevant ist oder nicht), es enthält einige Pixeldaten. Here's my JSFiddle example.Wie verwende ich ein SVG-Bild als Hintergrund?
Hinweis, die direkt auf das Bild geht, ist es ganz gut zeigt sich: http://ykcreations.com/tv.svg
Edit: Dies gilt nicht in Chrome oder Safari arbeiten, aber TUT in Firefox. Webkit-Problem?
Es hat mit dem Bild zu tun, versuchen Sie Folgendes in Ihre CSS Verstopfen:
.tv
{
background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
width: 400px;
height: 400px;
}
Vielleicht SVG eigentlich ein SVGZ ist Ihr? SVGZ Dateien sind die komprimierten Versionen von SVG Dateien. Normalerweise müssen Sie Ihren Server dafür konfigurieren, aber FF ist möglicherweise nur in der Lage, mit den komprimierten Versionen umzugehen.
BEARBEITEN Siehe unten die Antwort von Phrogz (möglicherweise oben, wenn Sie dies lesen); es deckt das ab und gibt eine bessere Erklärung.
Sie können anhand der HTTP-Antwortheader sehen, dass die Daten nicht gezippt werden. – Phrogz
Würde die Kopfzeile angeben, ob die Datei gezippt, aber nicht ordnungsgemäß als gezippt markiert wurde? (Ich frage nur, weil ich ehrlich diese Dinge nicht weiß) –
Wenn das der Fall wäre dann würde 'curl http: // www.ykcreations.com/tv.svg' binäre Daten herein kommen. Es tut nicht; Es zeigt die richtige Kodierung. – Phrogz
Es gibt ein Problem mit Ihrer Quelle SVG. Sehen Sie diese aktualisiert Fiddle zeigt auf a different SVG file, die richtig funktioniert: http://jsfiddle.net/wdW2K/2/
.tv {
background: url("http://phrogz.net/svg/800x800.svg");
width: 400px; height: 400px;
}
bearbeiten: Insbesondere das Problem erscheint dass WebKit sein nicht <image> in einer SVG-Unterstützung als Hintergrund verwendet. Ändere deine Datei minimal, um die <image> zu ändern, um auf eine lokale Datei (nicht Daten-uri) zu verweisen, und fügte eine <circle/> hinzu. Ich konnte sowohl das Bild als auch den Kreis sehen, wenn das SVG direkt in Chrome angezeigt wurde, aber als Hintergrund verwendet wurde Bild nur der Kreis war sichtbar.
This bug riecht relevant.
Ich verstehe Ihre Bearbeitung nicht ganz. Ich habe auch eine SVG-Datei, die nicht als Hintergrund funktioniert, und ich sehe, dass es darin einen großen Teil von '
@vsync Was ich sagte, war, dass ich das Beispiel schlichte, sehr einfach zu sein-'
Es gibt einen Fehler, ich wünschte, ich könnte es finden, damit ich es spielen kann. – vsync
Eine andere mögliche Ursache ist das Versorgen des SVG mit dem falschen MIME-Typ. Wenn Sie es auf 'image/svg + xml' setzen, kann das Problem behoben werden.
In Rails, kann dies, indem es das getan werden folgende config/Initialisierer/mime_types.rb:
Mime::Type.register 'image/svg+xml', :svg
Ich habe es für PHP mit https://css-tricks.com/snippets/htaccess/serve behoben -svg-correct-content-type/& http://stackoverflow.com/a/37598893/1461060 – gihanchanuka
ich mit Rendering-svg als Hintergrundbild in Chrome ein simmilar Problem hatte, aber alles war gut in Firefox.Ich fand heraus, dass es ein Syntaxfehler in meinen SVG-Dateien wurde von Adobe exportieren:
falsch XLink Attribut:
xlink:href="data:img/png;base64
korrekt xlink Attribut:
xlink:href="data:image/png;base64
Artikel unten:
Es sieht aus wie es mir geht. – Herohtar
Funktioniert gut für mich ... dauerte lange, um zu laden. –
Funktioniert nicht auf Chrome/ubuntu, funktioniert aber auf FF/ubuntu. –