Kafelki tła obrazu mają przerwę między nimi podczas korzystania z obrazu SVG. Jak rozwiązać problem w Chrome?

Gdy używam obrazu SVG jako tła kafelkowego dla treści strony, pomiędzy płytkami jest niewielka przerwa. Jeśli przejdę do wersji pliku PNG, to się nie stanie.Kafelki tła obrazu mają przerwę między nimi podczas korzystania z obrazu SVG. Jak rozwiązać problem w Chrome?

Używam najnowszej wersji przeglądarki Google Chrome dla komputerów Mac - wersja 19.0.1084.56. Nie testowałem systemu Windows, ponieważ nie mam tej platformy. Plik działa zgodnie z oczekiwaniami w Safari i FF.

Po kilku wyszukiwaniach w Google i przeszukiwaniu tutaj na stronie SO nie znalazłem żadnych podobnych raportów. Może ktoś tutaj ma rozwiązanie.

Tu jest mój kodu testu:

<!DOCTYPE html> 
<html> 
<head> 
<title>SVG background test</title> 
<style type="text/css"> 
body { 
    background-color: #FFF; 
    background-image: url(img/assets/background.svg); 
    background-repeat: repeat; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

Źródło

2012-06-26 Violet

Okazało się po prostu nie dzieje się to Chrome, ale to było bardziej zauważalne w tej przeglądarce. Jak napisałem powyżej, oto rozwiązanie: Po przeczytaniu rozwiązania dla nieco innego problemu z Chrome/svg, znalazłem odpowiedź. Opublikuj tutaj, na wypadek, gdyby ktoś inny przeszedł przez ten problem. Stworzyłem swój plik SVG w programie Illustrator. Najwyraźniej mój obszar roboczy/obraz nie był w dokładnych pikselach. Odkryłem to przez otwarcie mój plik SVG w edytorze tekstu i patrząc na początku pliku Widziałem to:

width="229.9999px" height="147.4256px"

otworzyłem plik SVG w ilustrator i upewnić się, że wymiary były dokładnie nawet pikseli, a następnie ponownie zaznaczone w pliku tekstowym. Poprawione wymiary to:

width="230px height="148px"

Z jakiegoś powodu po prostu edycji wartości w pliku tekstowym nie dla mnie, ale potem znowu było szybciej po prostu naprawić w Illustrator niż dowiedzieć się, jak poprawnie edytować plik tekstowy SVG . W każdym razie, teraz nie mam luki w moich kaflach. Mam nadzieję, że pomaga komuś innemu, jeśli mają ten problem.

Źródło

2012-07-05 23:39:00 Violet

Prawdopodobnie błąd zaokrąglania. – Palec

To nie rozwiąże mojego problemu. Mam plik svg o szerokości 100 pikseli i wysokości 100 pikseli, ale nadal istnieje luka. Interesujące jest to, że Firefox wydaje się nie mieć tego problemu. –

TY GENIUS! DZIĘKUJEMY – paulslater19

Są cztery rzeczy szukać (ta odpowiedź jest dla innych ludzi, którzy kończą się tutaj szuka rozwiązania):

upewniając się height i width są liczbami całkowitymi aka „bez komponentu frakcyjnej” (jak wskazano przez Violet, bez miejsc po przecinku)
Przykład: height="326.25" vs height="326"
upewniając się viewbox również liczby całkowite
E XAMPLE viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"
A jeśli masz rzutnię, można również ustawić atrybut
Learn More On MDN
preserveAspectRatio Inną rzeczą, aby zwrócić uwagę na to mają wysokość i szerokość ustawiony atrybut w tagu svg. Rozwiązuje to problem z wielkością IE background-size. This is a good article about it.

W mojej sytuacji, SVG powtórzony poprawnie w Chrome, ale miał lukę w Firefoksie aż ustawić wszystkie moje atrybuty do liczb całkowitych.

Źródło

2016-02-26 18:43:48

To nie jest problem szerokości ani wysokości. Pojawia się, nawet jeśli twój wzór svg ma 100px x 100px i nie ma wartości dziesiętnej.

Można rozwiązać ten problem oddanie preserveaspectratio = „none” w pliku svg jak to: <svg preserveAspectRatio="none" ...>

Ale gdy chcesz powtórzyć wzór svg nie można wybrać tę opcję, ponieważ wzór będzie zniekształcony.

Czy znalazłeś odpowiedź?

Źródło

2016-10-12 16:46:43 user3101788

Jeśli masz inne pytanie, zadaj je, klikając przycisk "Zadaj pytanie" (// stackoverflow.com/questions/ask). –

Kafelki tła obrazu mają przerwę między nimi podczas korzystania z obrazu SVG. Jak rozwiązać problem w Chrome?

Odpowiedz

Powiązane problemy