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ử?

Question

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.

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> 

Answer 1

Got một giải pháp bản thân mình. Bí quyết được thêm vào:

shape-rendering="crispEdges" 

thành phần SVG.

Từ Mozilla MDN:

crispEdges Chỉ ra rằng tác nhân người dùng sẽ cố gắng để nhấn mạnh sự tương phản giữa mép sạch của tác phẩm nghệ thuật trên tốc độ dựng hình và độ chính xác hình học. Để đạt được các cạnh sắc nét, tác nhân người dùng có thể tắt tính năng chống răng cưa cho tất cả các đường và đường cong hoặc có thể chỉ cho các đường thẳng gần thẳng đứng hoặc nằm ngang. Ngoài ra, tác nhân người dùng có thể điều chỉnh vị trí đường và độ rộng của đường để căn chỉnh các cạnh với pixel của thiết bị.

Xem sự khác biệt trên jsFilddle.