避免相邻svg矩形之间的线条

Question

虽然hinting the browser about anti-aliasing in svg有一些标准化的选项，但它们似乎都不适用于我有圆角矩形的情况 - 因此无法解决反锯齿问题。

虽然我的矩形的大小不会在它们之间留下任何垂直空间，但由于抗锯齿的影响，它们之间会显示一条细线。例如。我的svg在像素80处有一个矩形末端，下一个在81处开始，但他们仍然在它们之间显示一个细的背景线。

没有办法强制使用最新版本的浏览器来避免直线的抗锯齿（crispEdges不会强制我的圆角矩形）。

我通过在 y 值中添加0.5个像素以及仅调整偶数或仅奇数 y 值来阅读一些关于调整的内容（我相信这与事实上，大多数现代LCD屏幕都包含two hardware vertical pixels per software exposed pixel）。我不确定这是如何精确地缓解这个问题的，并且想要明确说明为什么这是有道理的，什么是最正确/可靠的调整方法。

Answer 1

  

每个软件暴露像素的两个硬件垂直像素

没错。

指定像＆＃34; 81＆＃34;在SVG中，该坐标位于像素80和81之间的虚线上。如果您的线条具有宽度＆＃34; 1＆＃34;，则渲染器将尝试通过将80％的颜色放在80像素上来绘制和81像素上的50％。这是抗锯齿。如果您希望一个像素线不像那样消除锯齿，请给它坐标81.5。这样整行就会落在像素81之内。

然而，如果你的线宽2（或任何其他均匀宽度），你不应该使用81.5但保持81.因为它将在像素80中呈现50％（即1），在像素81中呈现50％（1）导致没有抗锯齿效果。

这适用于水平和垂直线。无论您使用的是液晶显示器还是旧式CRT，都适用。

这种解释现在有意义吗？