2012-06-26 31 views
8

Khi tôi sử dụng hình ảnh SVG làm nền lát nền cho phần thân trang của tôi, có một khoảng cách nhỏ giữa các ô. Nếu tôi chuyển sang phiên bản PNG của tệp, nó sẽ không xảy ra.Gạch hình nền có khoảng cách giữa chúng khi sử dụng hình ảnh SVG. Cách giải quyết trong Chrome?

Tôi đang sử dụng phiên bản mới nhất của Google Chrome dành cho Mac - phiên bản 19.0.1084.56. Tôi chưa thử nghiệm Windows vì tôi không có nền tảng đó. Tệp hoạt động như mong đợi trong Safari và FF.

Sau một loạt tìm kiếm của Google và tìm kiếm ở đây trên SO, tôi chưa tìm thấy bất kỳ báo cáo tương tự nào. Có lẽ ai đó ở đây có một giải pháp.

Đây là mã thử nghiệm của tôi:

<!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> 

Trả lời

8

Điều này hóa ra không chỉ để thể xảy ra nó Chrome, nhưng nó đã được chú ý hơn trong trình duyệt đó. Như tôi đã đăng ở trên, đây là giải pháp: Sau khi đọc giải pháp cho một vấn đề khác về Chrome/svg, tôi đã tìm ra câu trả lời. Đăng lại ở đây trong trường hợp người khác gặp phải vấn đề này. Tôi đã tạo tệp SVG của mình trong Illustrator. Rõ ràng kích thước hình ảnh/hình ảnh của tôi không có pixel chính xác. Tôi phát hiện ra điều này bằng cách mở tập tin SVG của tôi trong một trình soạn thảo văn bản và tìm kiếm ở phía trên cùng của file tôi thấy điều này:

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

Tôi mở file svg trong vẽ tranh minh họa và chắc chắn rằng kích thước là chính xác thậm chí pixel, sau đó kiểm tra lại một lần nữa trong tập tin văn bản. kích thước điều chỉnh là:

width="230px height="148px" 

Đối với một số lý do đơn giản là chỉnh sửa các giá trị trong các tập tin văn bản không làm việc cho tôi, nhưng sau đó một lần nữa nó là nhanh hơn để chỉ sửa chữa trong Illustrator hơn tìm ra cách để chỉnh sửa các tập tin văn bản svg một cách chính xác . Ở mức nào, bây giờ tôi không có một khoảng trống trong gạch của tôi. Hy vọng rằng sẽ giúp đỡ người khác nếu họ đang gặp vấn đề này.

+0

Có thể là lỗi tắt. – Palec

+3

Điều này không giải quyết được vấn đề của tôi. Tôi có một tập tin svg với chiều rộng 100px và chiều cao 100px, nhưng vẫn còn một khoảng trống ở đây. Điều thú vị là, Firefox dường như không có vấn đề này. –

+0

BẠN GENIUS! THANK YOU – paulslater19

0

Có bốn điều cần tìm kiếm (câu trả lời này là dành cho những người khác kết thúc ở đây tìm kiếm một giải pháp):

  1. Đảm bảo các heightwidth là các số nguyên aka "mà không có một thành phần phân đoạn" (như đã đề cập bởi Violet, không có số thập phân)
    Ví dụ: height="326.25" vs height="326"

  2. Đảm bảo bạn viewbox cũng là số nguyên
    E xample viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"

  3. Và nếu bạn có một khung nhìn, bạn cũng có thể thiết lập các preserveAspectRatio thuộc tính
    Learn More On MDN

  4. Một điều cần chú ý đến là có chiều cao và thuộc tính chiều rộng thiết lập trong thẻ svg. Điều này giải quyết vấn đề về kích thước IE background-size. This is a good article about it.

Trong trường hợp của tôi, SVG lặp lại chính xác trong Chrome, nhưng tôi đã đặt tất cả các thuộc tính của mình thành số nguyên.

0

Đó không phải là vấn đề về chiều rộng hoặc chiều cao. Nó xuất hiện ngay cả khi mẫu svg của bạn là 100px x 100px và không có dấu thập phân.

Bạn có thể giải quyết vấn đề đặt preserveAspectRatio = "none" trong file svg của bạn vì nó: <svg preserveAspectRatio="none" ...>

Nhưng khi bạn muốn lặp lại một mô hình svg bạn không thể chọn tùy chọn này vì mô hình của bạn sẽ bị bóp méo.

Bạn đã tìm thấy câu trả lời chưa?

+0

Nếu bạn có câu hỏi khác, vui lòng hỏi câu hỏi bằng cách nhấp vào nút [Hỏi câu hỏi (// stackoverflow.com/questions/ask). –

Các vấn đề liên quan