Cách tạo SVG sắc nét trong Firefox và Internet Explorer

Question

Khi tôi sử dụng <svg> để hiển thị biểu tượng, biểu tượng này trông hoàn toàn sắc nét và sắc nét trong Google Chrome. Tuy nhiên, ngay sau khi tôi mở svg trong Firefox hoặc Internet Explorer, biểu tượng trông mờ.

Dường như những Trình duyệt đó biểu thị biểu tượng thành một nửa pixel. Chỉ Google Chrome mới hoạt động tốt ở đây.

phương pháp tốt nhất để có được biểu tượng svg sắc nét trong tất cả các trình duyệt là gì? (Chúng tôi muốn tô màu các biểu tượng qua tô màu: ... để sử dụng hình ảnh nền hoặc pixel không có tùy chọn)

Điều tôi đã thử cho đến nay: Tôi đã áp dụng thuộc tính CSS shape-rendering. nhưng cái này quá sắc nét và sắc sảo.

<svg width="16px" height="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> 
 
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path> 
 
</svg> 
 
<svg width="32px" height="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"> 
 
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path> 
 
</svg> 
 

 
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;"> 
 
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
\t <rect y="19" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="3" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="11" fill="#231F20" width="24" height="2"></rect> 
 
</svg> 
 
</i></button> 
 

 

 
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> 
 
\t <rect y="19" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="3" fill="#231F20" width="24" height="2"></rect> 
 
\t <rect y="11" fill="#231F20" width="24" height="2"></rect> 
 
</svg>

Answer 1

Hack cho Firefox:

svg { 
transform: translateZ(0); 
} 

gì về IE: lý do có thể khi container svg vị trí ở tọa độ như 31,5 (không chính xác trên dòng pixel), IE sẽ vẽ svg trong container này theo cùng một cách, một bit off line pixel.

Answer 2

Sử dụng giá trị lớn hơn nhiều cho rộng và chiều cao.

Những gì bạn đang thực hiện tại thời điểm này về cơ bản là chỉ định hình ảnh 24 x 16 pixel và mở rộng nó thành kích thước toàn màn hình. SVG nên có khả năng mở rộng vô hạn, do đó tên, nhưng một số Trình duyệt, giống như một số TV tốt hơn ở nội suy pixel so với các loại khác.