SVG镶边镀铬

Question

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

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

我还注意到FF窗口的POSITION改变了渲染。 当超过一半的窗口在原生显示器上时，电影院边有条带而不是原生侧。 当移动窗口以使其超过一半在电影院显示器上时，条带显示在电影院侧消失并出现在原生侧。 对于safari来说也是如此，但是chrome没有这种行为，条带在本机方面总是更明显，而在电影方面则不那么引人注目。

这真的让我很烦恼。 这到底是怎么回事？

Answer 1

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

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

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

如果没有10位或12位灰度监视器，这将是您获得的最佳结果。 使用您的显示器和此设计，从技术上讲，无法获得更好的结果。

如果您希望使用当前的24位彩色显示器不那么明显，您可以：

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

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

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

......或以上的某种组合。

Answer 2

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

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

也许这种放大将使它更清晰：

左边是Firefox，右边是Webkit。 似乎Firefox支持抖动渐变，而Webkit则不支持。 我担心你无能为力。