移除 .svg 图像上的浏览器抗锯齿功能

Question

有什么方法可以阻止 Chrome 和 Firefox 对 .svg 图像应用抗锯齿功能？无论图像是放大还是缩小，还是保持其原始大小，它总是会发生。这对于大图像来说很好，但对于小图标来说，抗锯齿效果非常明显，让图像看起来很模糊。

我尝试了图像渲染 css 属性的各种不同值。我相信图像渲染：清晰边缘是我需要的，但这还没有得到适当的支持并且没有效果。

以上形状的边缘应该是黑色的，没有抗锯齿。

Answer 1

将 shape-rendering="crispEdges" 添加到形状中。你也可以通过 CSS 来做到这一点，例如

* {
  shape-rendering: crispEdges;
}