在所有浏览器中模糊的 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) .所有四个像素都将被着色，以获得尽可能接近不可显示点的像素图像。