SVG 镶边

Question

当我注意到 Google Chrome (20) 中存在一些严重的条带问题时，我正在使用 svg 文件来生成平滑渐变。更奇怪的是，当我将 chrome 移到我的电影显示器上时，条纹明显减少，这使得这更加奇怪。下面是当网站跨越我的mbp的本机屏幕（左）和电影院显示（右）时拍摄的单个屏幕截图（根本没有photoshop）。 如您所见，左侧的条带更加严重。更奇怪的是，在 safari FF 或 ie9 中仍然存在接近于零的条带。下面是同样的情况，但在 FF 中

我感觉这可能是驱动程序问题或类似问题。但我真的很想知道。这到底是怎么回事？为什么它会在屏幕之间显示如此不同？跨两个显示器的单个屏幕抓取怎么可能产生这样的变化？

我也刚刚注意到 FF 窗口的 POSITION 改变了渲染。当超过一半的窗口在本机显示器上时，电影院一侧会出现条带，但本机一侧没有。当窗口移动到一半以上在影院显示时，条带显示在影院侧消失并出现在原生侧。 safari 也是如此，但 chrome 没有这种行为，条带在原生端总是更明显，而在影院端则不太明显。

这真的让我很奇怪。这到底是怎么回事？

Answer 1

您正在渐变中心的rgb(85,85,85) 和角落的rgb(28,28,28) 之间转换。一个 24 位 RGB 色彩空间（8 位 RGB 空间）只有 58 种独特的灰度颜色可在该区域显示。

顶部图像上从渐变的角到中心的距离约为 520 像素。如果间隔均匀，这意味着相同的颜色必须连续显示至少 9 个像素。大多数人可以很容易地感知到各个 8 位灰度之间的差异，尤其是在颜色范围的中间。

正如@Duopixel 正确指出的那样，您的其中一个渐变是抖动的，有助于软化这些颜色之间的过渡。有趣的是，在您的双显示器测试中，有些频段是抖动的，有些则不是。这可能是因为硬件加速仅应用于一台显示器而不是另一台显示器。

像10- or 12-bit grayscale monitor 这样的失败是您将获得的最佳结果。使用您的显示器和这种设计，在技术上不可能获得更好的结果。

如果您想让当前的 24 位彩色显示器不那么明显，您可以：

• 更改您的设计，在渐变中引入微妙的颜色变化（例如，从深蓝色变为灰绿色）。这会导致不同的 RGB 通道位可以在不同的时间转换，将您的波段分解为更小的差异化颜色。

• 更改您的设计以增加您的动态范围（例如，从纯白色到纯黑色），以便您可以使用更多的彩条。

• 更改您的设计以减少渐变发生的总距离，从而减小带的宽度。

…或以上的某种组合。

Answer 2

我不确定切换显示器时发生了什么。

在 Firefox 中减少条带的原因是因为diethering，像素溢出到下一个颜色，随机化。有点像在带状渐变上添加模糊。

也许这个放大会让它更清楚：

左边是Firefox，右边是Webkit。似乎 Firefox 支持抖动渐变，而 Webkit 不支持。恐怕你无能为力。