避免adjecent svg矩形之间的界限

Question

虽然有一些标准化的选项来暗示浏览器svg中的抗锯齿,但它们似乎都不适用于我的情况,我有圆角的矩形 - 因此无法负担关闭抗锯齿.

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

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

我通过在y值上添加0.5像素并且仅调整偶数或仅奇数y值来阅读一些关于调整的内容(我相信这与大多数现代LCD屏幕每个软件曝光像素包括两个硬件垂直像素的事实有关).我不确定这是如何精确地减轻这个问题,并且想要明确说明为什么这是有道理的,什么是最正确/可靠的调整方法.

Answer 1

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

不,这是错的.

在SVG中指定类似"81"的坐标时,该坐标位于像素80和81之间的虚线上.如果您的线条宽度为"1",则渲染器将尝试通过放置50%的颜色来绘制在80像素和80像素上的81像素.这是抗锯齿.如果您希望一个像素线不像那样消除锯齿,请给它坐标81.5.这样整条线将落在像素81内.

但是,如果你的线宽2(或任何其他均匀宽度),你不应该使用81.5但保持81.因为它将在像素80中呈现50%(即1),在像素81中呈现50%(1).结果没有抗锯齿效果.

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

这个解释现在有意义了吗？