Hình ảnh SVG mờ trong chrome dành cho Android

Question

---

Để thoát khỏi các mật độ điểm ảnh khác nhau trong điện thoại di động, tôi sử dụng tệp SVG làm hình nền trong css của mình.

Chrome cho Android dường như để render inline-svg tốt, nhưng thất bại nếu svg

• được sử dụng trong css với background-image và một url bình thường
• được sử dụng trong css với background-image và một uri dữ liệu
• được sử dụng với một image yếu tố

Trình duyệt cổ phiếu của android 4 tác phẩm tốt. (và tất cả các điện thoại di động khác mà tôi cũng đã thử)

Bạn có thể truy cập this fiddle và kiểm tra. Phóng to để xem sự khác biệt.

Bất cứ ai cũng biết tại sao Chrome sử dụng một số bitmap được hiển thị trước tại đây?

Answer 1

Nếu bạn đang chèn tệp SVG, tệp sẽ (tùy thuộc vào máy chủ, ví dụ Wikipedia) được hiển thị trước. Do đó, khi tải, hình ảnh sẽ hiển thị cho kích thước đã cho. SVG nội tuyến (được mã hóa trực tiếp vào trang) sẽ tái kích thước khi kích thước lại trang. Tuy nhiên, tôi không chắc chắn về các trình duyệt di động vì chúng không thay đổi kích thước các phần tử trong trang, chúng chỉ "thu phóng"

Vì vậy, về cơ bản những gì bạn đang làm là vẽ SVG lên Canvas (sau đó) thu phóng canvas. Inline có SVG trực tiếp ... do đó, tốt hơn ....

Answer 2

Đây là một vấn đề được biết https://code.google.com/p/chromium/issues/detail?id=161982

Khi SVG được trả lại như một (hoặc hình ảnh nền) hình ảnh ban đầu nó được trả lại cho mật độ điểm ảnh CSS, làm cho nó mờ trên các thiết bị có 1 CSS px! = 1 thiết bị px, bao gồm hầu hết các điện thoại Android cao cấp.

Vấn đề đó đã được cố định trong Chrome 25 (phiên bản hiện tại thời điểm viết bài), tuy nhiên những hình ảnh trở nên mờ một lần nữa khi bạn phóng to khung nhìn trong.

Vấn đề này được cố định trong Chrome 26 (hiện tại Chrome Beta, có sẵn trong cửa hàng chơi), hình ảnh và hình nền SVG vẫn sắc nét.

Answer 3

Khi các câu trả lời khác đã chỉ ra trong vấn đề này và các sự cố tương tự khác, việc hiển thị SVG có vấn đề trong chrome và trình duyệt web android gốc. Đó là vấn đề về trình duyệt Chrome/gốc đã biết.

Sau khi xem xét nhiều giải pháp trong một số ngày, tôi tình cờ gặp phải sự cố này. Bí quyết là nhúng văn bản bên trong tệp SVG, đây có thể là ký tự đơn trong suốt.

Ví dụ: thêm mục này (hoặc tương tự) vào tệp SVG của bạn.

<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text> 

Nếu không điều tra nguồn chrome hoặc quy trình thực tế, tôi chỉ có thể giả định rằng bằng cách nhúng văn bản, nó sẽ buộc SVG được hiển thị lại trên quy mô cho các thiết bị dpi cao.

Giải pháp này (trên trình duyệt tôi đã có thể thử nghiệm trên Android/Chrome) hoạt động bất kể yếu tố nền hình ảnh được sử dụng, xoay, vị trí cố định, v.v ...Và thậm chí có vẻ rõ ràng dưới zoom.

Tận hưởng!

Answer 4

Đối với tôi, giải pháp trong khi nó mất rất nhiều thời gian để khám phá là yếu tố tôi css:

border-radius: 4px; 

này cố định vấn đề của tôi, tuy nhiên tôi đã không thể để tái tạo nó trên hơn trên trang web của tôi có được làm việc trên nhưng đây là fiddle mà tôi đã cố gắng để tái tạo vấn đề về điện thoại di động:

http://jsfiddle.net/rc8Hh/31/

Chúc may mắn, kiểm tra tư vấn cho tôi nếu có một lớp mà có thể ảnh hưởng đến các bản vẽ của phần tử.