SVG镶边镀铬

Question

我正在使用svg文件来生成平滑的渐变，当我注意到Google Chrome中存在一些严重的条带问题（20）。当我将铬合金移动到我的电影院显示器上时，甚至更奇怪的是，条带明显减少，这使得它更加怪异。下面是一个单屏幕抓取（根本没有photoshop）当网站跨越我的mbp的原生屏幕（左）和电影院显示（右）。 你可以看到左边的条带更加严重。陌生人仍然在safari FF或ie9中接近零带。下面是相同的情况，但在FF

我觉得这可能是司机问题等。但我真的想知道。到底发生了什么事？为什么屏幕之间的显示会如此不同？如何在两台显示器上单个屏幕抓取产生这样的变化？

我还注意到FF窗口的位置改变了渲染。当超过一半的窗口在原生显示器上时，电影院边有条带而不是原生侧。当移动窗口以使其超过一半在电影院显示器上时，条带显示在电影院侧消失并出现在原生侧。对于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则不支持。我担心你无能为力。