SVG 矩形在所有浏览器中都模糊了

Question

这个 SVG 在所有浏览器中、在所有缩放级别上看起来都很模糊。

<svg xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="240" height="240" version="1.1">
  <rect width="200" height="200" x="20" y="20"
        ry="20" style="fill:#fff;stroke:#000" />
</svg>

在 Chrome、Safari 和 Firefox 中，它看起来像这样：

如果您放大，您可以看到笔划有两个像素的宽度，即使默认笔划宽度是 1 像素。手动设置为 1px 不会影响输出。

Answer 1

这与像素光栅化有关。线宽为 1px，以 (20,20) 为中心。它在 19.5 到 20.5 像素之间绘制，因此浏览器必须为两个像素着色以“使用足够的墨水”。

解决方案：使用19.5 作为像素栅格中的坐标。

<svg xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="240" height="240" version="1.1">
  <rect width="200" height="200" x="19.5" y="19.5"
        ry="20" style="fill:#fff;stroke:#000" />
</svg>

编辑：

在下图中，蓝点的大小为1px，位于（居中）(1,1)。所有四个像素都将被着色以获得尽可能接近不可显示点的像素图像。