Wenn ich ein SVG-Bild als gekachelten Hintergrund für den Körper meiner Seite verwende, gibt es eine kleine Lücke zwischen den Kacheln. Wenn ich zur PNG-Version der Datei wechsle, passiert das nicht.
Ich verwende die neueste Version von Google Chrome für Mac - Version 19.0.1084.56. Ich habe Windows nicht getestet, weil ich diese Plattform nicht habe. Datei funktioniert wie erwartet in Safari und FF.
Nach ein paar Google-Suchen und der Suche hier auf SO habe ich keine ähnlichen Berichte gefunden. Vielleicht hat hier jemand eine Lösung.
Hier ist mein Testcode:
%Vor%Es stellte sich heraus, dass es nicht nur passiert, Chrome, aber es war mehr auffällig in diesem Browser. Wie ich oben gepostet habe, hier ist die Lösung: Nachdem ich eine Lösung für ein etwas anderes Chrome / SVG-Problem gelesen hatte, fand ich die Antwort heraus. Zurückgeben, wenn jemand anderes dieses Problem durchläuft. Ich habe meine SVG-Datei in Illustrator erstellt. Anscheinend war meine Zeichenfläche / Bildgröße nicht in genauen Pixeln. Ich entdeckte das, indem ich meine SVG-Datei in einem Texteditor öffnete und oben auf die Datei schaute, die ich sah:
%Vor%Ich habe die Svg-Datei im Illustrator geöffnet und sichergestellt, dass die Abmessungen genau gerade Pixel waren, und dann nochmal in der Textdatei überprüft. Korrigierte Dimensionen waren:
%Vor%Aus irgendeinem Grund funktionierte die einfache Bearbeitung der Werte in der Textdatei nicht für mich, aber andererseits war es schneller, nur in Illustrator zu korrigieren, als herauszufinden, wie die SVG-Textdatei korrekt bearbeitet werden kann. Auf jeden Fall habe ich jetzt keine Lücke in meinen Fliesen. Hoffe, dass das jemand anderem hilft, wenn sie dieses Problem haben.
Es gibt vier Dinge zu suchen (diese Antwort ist für andere Leute, die hier nach einer Lösung suchen):
Sicherstellen, dass die height und width ganze Zahlen sind, auch "ohne eine Bruchkomponente" (wie von Violet erwähnt, keine Dezimalstellen)
Beispiel: height="326.25" vs height="326"
Stellen Sie sicher, dass Ihre viewbox auch ganze Zahlen sind
Beispiel viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"
Und wenn Sie ein Ansichtsfenster haben, können Sie auch das preserveAspectRatio -Attribut festlegen: Weitere Informationen zu MDN
Eine weitere Sache, auf die Sie achten sollten, ist das Attribut height und width im svg -Tag. Dies löst ein IE background-size Sizing-Problem. Dies ist ein guter Artikel darüber. / p>
In meiner Situation hat das SVG in Chrome korrekt wiederholt, hatte aber eine Lücke in Firefox, bis ich alle meine Attribute auf Ganzzahlen gesetzt habe.
Es ist kein Problem der Breite oder Höhe. Es erscheint auch, wenn Ihr Svg-Muster 100px x 100px ist und keine Dezimalstelle hat.
Sie können das Problem beheben, indem Sie preserveAspectRatio="none" in Ihrer Svg-Datei als: <svg preserveAspectRatio="none" ...>
Aber wenn Sie ein SVG-Muster wiederholen möchten, können Sie diese Option nicht wählen, da Ihr Muster verzerrt wird.
Hast du die Antwort gefunden?
Tags und Links svg google-chrome css3 background-image