避免相邻 svg 矩形之间的线条 [英] Avoiding lines between adjecent svg rectangles

问题描述

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

Although there's some standardized options for hinting the browser about anti-aliasing in svg, none of them seems to work for my case where I have rectangles with rounded corners - and therefore can't afford turning off anti-aliasing.

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

Although my rectangles are sized to leave no vertical spaces between them, a thin line shows between them, due to the effects of anti-aliasing. E.g. my svg has one rectangle end at pixel 80 and the next one starts at 81, but still they get a thin background line show between them.

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

There's no way to force latest version browsers to avoid anti-aliasing for straight lines (crispEdges doesn't force that for my rounded rectangles).

我阅读了一些关于通过向 y 值添加 0.5 个像素以及仅调整偶数或仅奇数 y 值(我相信这与事实上，大多数现代 LCD 屏幕包含每个软件暴露像素两个硬件垂直像素).我不确定这在多大程度上缓解了问题，并想明确说明为什么这样做有意义以及最正确/最可靠的调整方法是什么.

I read some about tweaking by adding 0.5 of a pixel to the y values and about tweaking only even or only odd y values (I believe this is related to the fact that most contemporary LCD screens comprise two hardware vertical pixels per software exposed pixel). I am unsure how precisely this mitigates the problem, and would like to get a definite account of why exactly this makes sense and what is the most correct/solid tweaking approach.

推荐答案

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

two hardware vertical pixels per software exposed pixel

不，那是错的.

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

When you specify a coordinate like "81" in an SVG, that coordinate falls on the imaginary line between pixel 80 and 81. If your line has width "1", then the renderer will attempt to draw that by placing 50% of the colour on the 80 pixel and 50% on the 81 pixel. This is anti-aliasing. If you want the one pixel line to not be anti-aliased like that, give it coordinate 81.5. That way the whole line will fall within pixel 81.

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

However if your line had width 2 (or any other even width) you should not use 81.5 but stay with 81. Because it will render 50% (ie. 1) in pixel 80 and 50% (1) in pixel 81. Resulting in no anti-aliasing effect.

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

This applies for both horizontal and vertical lines. And applies whether you are on an LCD or old CRT.

这个解释现在有意义吗?

Does this explanation make sense now?

这篇关于避免相邻 svg 矩形之间的线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！