Html 如何修复使用SVG缩放时的模糊？

HTML

输出1（Firefox 57.0.2）

输出2（Chrome 63.0）

如上图所示缩放图像会使其看起来模糊。（）

如果你知道答案，我想回答。谢谢。

尝试应用此功能

svg { width:20px; height:20px; }

---

}

在我看来，它模糊的唯一原因是因为您的屏幕分辨率低，并且设计与屏幕的像素网格不一致。该设计使用32个单位的网格，因此每条线的倍数为20*32/1024像素，这不是整数（0.625）。如果您想保持完全相同的设计，需要将常规1x分辨率屏幕的大小增加到32px。否则你需要用不同的网格重新设计（可能意味着改变设计中的行数）。@jcaron我英语不太好，但我知道一点。似乎我需要更多地研究屏幕，以便将其放置在正确的像素中。谢谢

svg { width:20px; height:20px; }

svg {
   -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0);