Tôi nhận thấy rằng khi tính năng Zoom CSS3 được áp dụng trên các biểu tượng SVG nhỏ (9px: 9px với zoom: 1.5), biểu tượng SVG có thể bị mờ. Bất kỳ ý tưởng để có được một biểu tượng sắc nét và sạch sẽ trong trường hợp này? Cảm ơn trước.Tắt tính năng chống răng cưa trên svg khi áp dụng CSS3: Thu phóng trên phần tử?
Các SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9">
<g>
<g fill="none" transform="translate(0.5, 0.5)">
<g stroke="#000000" stroke-width="0.5" stroke-linecap="square" >
<line x1="2" y1="4" x2="6" y2="4"/>
<line x1="4" y1="2" x2="4" y2="6"/>
</g>
<g stroke="#909090" stroke-width="1" stroke-linecap="square" >
<rect x="0" y="0" width="8" height="8"/>
</g>
</g>
</g>
</svg>
Trình duyệt nào? Một số trình duyệt không tính toán lại SVG khi thay đổi kích thước hoặc thu phóng. CSS3 Zoom là gì? Bạn có nghĩa là chỉ cần phóng to với trình duyệt? Hoặc tài sản IE không chuẩn? –
Cảm ơn bạn đã thông báo về câu hỏi của tôi. Dưới đây là một số thông tin về [CSS3 Zoom] (http://www.css3.com/css-zoom/). Nó được hỗ trợ rộng rãi bởi hầu hết các trình duyệt hiện đại. Tôi đang dùng thử trên Chrome và Safari iOS. – bigbearzhu
Có, đây không phải là tiêu chuẩn. Nó có khả năng chỉ cần thu phóng phần tử kết xuất mà không tính toán lại. Bạn đã thử sử dụng hàm biến đổi tỷ lệ thay thế chưa? Hoặc có thể sử dụng SVG gốc lớn hơn và giảm kích thước khi hiển thị ban đầu? –