避免在相邻的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屋！