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像素之间绘制,因此浏览器必须将两个像素着色为"使用足够的墨水".

解决方案:使用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(中心)at (1,1).将对所有四个像素着色以获得尽可能接近不可显示点的像素图像.