如何在Firefox和Internet Explorer中使SVG变得清晰

Question

当我使用<svg>来显示图标时，它在Google Chrome中看起来非常清晰锐利。但是，只要我在Firefox或Internet Explorer中打开svg，图标就会显得模糊。

似乎那些浏览器将图标渲染为半像素。只有Google Chrome在这里做得很好。

在所有浏览器中获取清晰svg图标的最佳方法是什么？ （我们希望通过填充为图标着色：...所以使用背景图像或像素图形都没有选项）

到目前为止我尝试了什么： 我已经应用了CSS属性shape-rendering。但这个太过清脆和前卫。

<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">
	<rect y="19" fill="#231F20" width="24" height="2"></rect>
	<rect y="3" fill="#231F20" width="24" height="2"></rect>
	<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">
	<rect y="19" fill="#231F20" width="24" height="2"></rect>
	<rect y="3" fill="#231F20" width="24" height="2"></rect>
	<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>

Answer 1

Hack for Firefox：

svg {
 transform: translateZ(0);
}

IE怎么样： 可能的原因当svg容器定位在像31.5这样的坐标（不完全在像素行上）时，IE会以相同的方式在这个容器中绘制svg，有点像素线。

Answer 2

为宽度和高度使用更大的值。

您目前正在做的事情主要是指定一个24 x 16像素的图像，并将其扩展到全屏尺寸。 SVG应该是无限可扩展的，因此名称，但有些浏览器，像一些电视在像素插值方面比其他更好。