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

【问题标题】：Avoiding lines between adjecent svg rectangles避免相邻 svg 矩形之间的线条
【发布时间】：2014-06-16 01:52:59
【问题描述】：

虽然hinting the browser about anti-aliasing in svg 有一些标准化选项，但它们似乎都不适合我的情况，因为我有圆角矩形 - 因此无法关闭抗锯齿。

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

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

我读到了一些关于通过将 0.5 个像素添加到 y 值以及仅调整偶数或仅奇数 y 值的调整（我相信这与事实上，大多数现代 LCD 屏幕都包含two hardware vertical pixels per software exposed pixel)。我不确定这在多大程度上缓解了这个问题，并想明确说明为什么这样做是有意义的，以及什么是最正确/可靠的调整方法。

【问题讨论】：

标签： svg antialiasing

【解决方案1】：

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

不，那是错误的。

当您在 SVG 中指定像“81”这样的坐标时，该坐标落在像素 80 和 81 之间的假想线上。如果您的线的宽度为“1”，那么渲染器将尝试通过放置 50% 来绘制它80 像素的颜色和 81 像素的 50%。这是抗锯齿。如果您不希望单像素线像那样进行抗锯齿处理，请将其坐标设为 81.5。这样整条线将落在像素 81 内。

但是，如果您的线条宽度为 2（或任何其他均匀宽度），则不应使用 81.5，而应使用 81。因为它将在像素 80 中呈现 50%（即 1），在像素 81 中呈现 50% (1) . 导致没有抗锯齿效果。

这适用于水平线和垂直线。无论您使用的是 LCD 还是旧 CRT，都适用。

这个解释现在有意义吗？

【讨论】：

坐标解释为像素之间的虚构位置，是否仅适用于抗锯齿的情况？仅在 SVG 中？我找不到关于这种“假想线”方法的确切信息。
这是一个概念/想象的线。此行为在 SVG 规范中指定，但并非 SVG 独有。
我添加了一个解释图。
hmmm 那么笔画宽度为零的矩形呢？
没有。坐标是否奇数无关紧要。仅当笔划宽度为。如果笔画宽度为奇数，则使用半像素坐标。要关闭元素（及其任何后代）的抗锯齿，您可以使用属性shape-rendering="crispEdges"。