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中，它看起来像这样：

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

Answer 1

这与像素光栅有关。线宽为1px，以（20,20）为中心。它在19.5和20.5像素之间绘制，因此浏览器必须将两个像素着色为＆＃34;使用足够的墨水＆＃34;。

解决方案：使用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)（居中）。所有四个像素都将被着色，以获得尽可能接近不可显示点的像素图像。