Firefox và Opera: SVG & kết quả nền có kết quả không tốt

Question

Tôi có một số yếu tố trên trang sử dụng tệp SVG làm hình nền. Nó hoạt động tốt trong Opera, Chrome và Safari, chỉ Firefox render đồ họa thực sự pixelated.

Tôi đã đã tìm kiếm trên chủ đề đó, thậm chí có những một số câu hỏi tương tự ở đây trên SO:
SVG rendering badly in Firefox
Firefox not anti-aliasing scaled background svg
Firefox SVG graphics blurry

Một số gợi ý là để không quy mô các SVG quá nhiều bằng background-size và cung cấp cho nó width="100%" height="100%".

Tôi chỉ chia tỷ lệ SVG thêm 5%, do đó thực sự không nên quá nhiều. Thêm width="100%" height="100%" đã sửa lỗi pixel một chút nhưng vẫn còn thực sự là bị mờ so với các trình duyệt khác.

giúp gì đã comment liên kết này: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707

Nguyên chiều rộng và chiều cao là 22px. Bây giờ tôi đã đặt cả hai thành 200px và voilà, SVG hiển thị sắc nét như nó nên - nhưng bây giờ Opera làm cho nó mờ một chút/thực sự xấu! Ngoài ra, khi phóng to, đồ họa bị 'cắt bỏ'. Vì vậy, thay vì tỷ lệ tương ứng, đồ họa dường như được nâng cấp trong hộp của nó. Có sửa chữa cho điều đó không?

Điều thú vị là: Làm hình nền cho nút, nó làm mờ. Như hình nền trong một trường đầu vào, nó ám chỉ là "quá sắc nét" tôi sẽ gọi nó.

Answer 1

hãy thêm các lớp phần tử bên dưới vào biểu định kiểu của bạn

img { 
-ms-interpolation-mode: bicubic; 
image-rendering: -moz-crisp-edges; 
background:transparent; }