Hình ảnh SVG hiển thị mờ trong Safari ở mọi kích thước nhỏ hơn 20 px


7

Tôi đang thực hiện bản demo di động cho Ipad mà chúng tôi đang demo trong Safari. Tôi đang sử dụng các biểu tượng để tránh việc phải phóng to hình ảnh của mình lên gấp 3 lần. Vấn đề là bất kỳ biểu tượng nào tôi đang sử dụng có kích thước nhỏ hơn 20px đều bị mờ trên màn hình cho đến khi bạn phóng to. Bất kỳ ai khác cũng gặp phải sự cố này và biết cách khắc phục là gì? FYI Tôi đã lưu những hình ảnh này trong Illustrator


2
Hình ảnh nhỏ có thể được khử răng cưa nhiều như hình ảnh lớn, nhưng tỷ lệ pixel 'mờ' so với pixel đầy là lớn hơn về mặt logic. Hãy tưởng tượng hình ảnh của bạn ở mức 4 pixel; sau đó, không còn các pixel được lấp đầy hoàn toàn. Không thể tắt khử răng cưa (trong đó tôi không biết nếu có thể và dù sao cũng không khuyến nghị) không có nhiều cách để khắc phục.
usr2564301

Tôi đã thử nghiệm mọi thứ trong suốt cả ngày. Vấn đề 20px chỉ hoạt động với một số hình ảnh .svg. Những thứ tôi tạo ra trong Illustrator và được lưu dưới dạng svg trông không đẹp bằng một số đồ họa .svg tôi đã lưu trong Illustrator. Vì vậy, có thể một số cài đặt tôi chọn không tối ưu. Tôi đã kiểm tra Chrome và Ffox và mọi thứ trông rất sắc nét vì vậy vấn đề khử răng cưa này chỉ có ở Safari. Tôi sẽ phải xem Safari trên PC có kết xuất giống như vậy không và quan trọng nhất là trên Tablet.
John nguy hiểm

Câu trả lời:


1

Không chắc chắn những gì bạn đã cố gắng. Nhưng bạn đã chơi với kết xuất hình: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribution/shape-rendering .

Các câu hỏi tương tự: /programming/11895813/svg-shape-rendering-on-ios

/programming/16889078/turn-off-anti-aliasing-on-svg-when-appending-css3zoom-on-the-element


Cám ơn vì đã chia sẻ. Tôi sẽ đọc lên. Mọi thứ đều tốt đối với tôi trong Safari trên Ipad vì vậy tất cả đều ổn nhưng theo tôi thì Safari trên máy tính để bàn trông không được tốt lắm nhưng theo tôi thì không có vấn đề gì với bản demo này
John Dangerous

1
Tìm thấy bài viết này về cách các trình duyệt khác nhau hiển thị SVG. opticalcortex.com/svg-rendering-in-browsers
John Nguy hiểm
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.