Tôi có hình ảnh kiểu pixelart có ý định mở rộng thành kích thước 4x với SVG. Tuy nhiên, mã sau làm mờ các pixel của hình ảnh:Tôi làm cách nào để mở rộng SVG <image> trong khi duy trì toàn bộ pixel?
<image x="0" y="0" width="1024" height="1024"
image-rendering="optimizeSpeed"
xlink:href="pixelart.bmp" />
Có một thuộc tính nào sẽ giải quyết vấn đề này không?
Tôi nghĩ rằng image-rendering="optimizeSpeed" là gần nhất bạn có thể nhận được. Vì trạng thái the specs for that property, nó "nên sử dụng thuật toán lấy lại mẫu để đạt được mục tiêu hiển thị nhanh, với yêu cầu rằng thuật toán lấy lại phải ít nhất cũng tốt như lấy lại mẫu lân cận gần nhất." Vì đây là phần duy nhất của thông số đề cập đến "hàng xóm gần nhất", tôi không nghĩ bạn có bất kỳ tùy chọn nào khác.
Điều duy nhất liên quan khác mà tôi có thể tìm thấy là IE9 property -ms-interpolation-mode:nearest-neighbor. Đây là (tất nhiên) IE cụ thể, và được liệt kê như là một tài sản CSS (vì vậy có thể chỉ áp dụng cho HTML).
Hệ điều hành/trình duyệt/phiên bản nào cung cấp cho bạn pixel nội suy do tăng kích thước với thuộc tính đó?
Ngoài ra, lưu ý rằng bạn có thể sử dụng một sự kết hợp của HTML5 Canvas và SVG để hoàn tái tạo hình ảnh của bạn với một SVG <rect> mỗi pixel:
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
Tôi đang gặp nó trên Google Chrome, có và không có thuộc tính đó. Hiện tại, tôi đang hacking nó bằng cách mở rộng hình ảnh của tôi trong sơn trước – Eric
Ooh, trông giống như 'hình ảnh rendering: -moz-sắc nét-cạnh;' cũng sẽ làm các trick. Bây giờ tài sản của chrome ở đâu? – Eric
Đây là [answeroverflow answer] (http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges) tương đương với WebKit (tại thời điểm câu trả lời, không có tương đương). – Phrogz