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

此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不会影响输出。

这与像素光栅有关。线宽为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）

（居中）。所有四个像素都将着色，以获得尽可能接近不可显示点的像素图像

---

关于SVG将笔划宽度围绕对象轮廓居中的位置，您是否有任何参考资料（与在内部或外部绘制相反）？@Gerrat，因为并非每个路径都有“内部”或“外部”（想象一条直线），我认为这在一般情况下是无法做到的（但没有：我没有在标准中查找到这一点）。