Html SGV渐变在站点处变暗

我正试图制作一个行星的球形图像，在阴影中有一个夜晚的一面，并在浏览器中呈现给模拟网页，但我一直在与一个奇怪的视觉问题作斗争，我似乎无法解决这个问题

这是SVG在Chrome中显示的图像剪贴图（在IE中也会出现这种情况），然后放大3倍：

你会注意到，就在白天/夜晚的终结者上方，有一条较暗的水平带，大约是终结者上方距离的1/3宽。这不应该存在，我无法理解它为什么存在或如何摆脱它

以下是HTML片段中的SVG代码，以便于查看：

---

这是因为在叠加渐变中使用了额外的停止值。当你们在叠加中使用线性梯度（

lgdEaNightSide

）给地球一个夜晚面，如下所示

您可以看到您正在使用两个偏移值，一个

为0.99，另一个
为1
。这就是为什么你的地平线会变得越来越暗

<linearGradient id="lgdEaNightSide" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
  <stop style="stop-color:#000000;stop-opacity:0.7;" offset="0.00" id="stopEaMidnight" />
  <!-- this stop seems to cause the artifact -->
  <stop style="stop-color:#000000;stop-opacity:0.6;" offset="0.99" id="stopEaDusk" />
  <stop style="stop-color:#000000;stop-opacity:0.5;" offset="1.00" id="stopEaTerminator" />
</linearGradient>



只要删除一个额外的停止值，它就会工作，请在下面找到工作代码：


代码没有问题

由于监视器没有足够的颜色来表示细微的变化，因此存在条带。您试图在大面积上更改10%的不透明度，这在大多数显示器上是不可能的

您可以通过切换屏幕来确定这是一个监视器问题。根据显示器的质量和像素密度，您将看到略有不同的结果。一些浏览器使用抖动，这减少了色带与像素化的权衡

解决这个问题的唯一方法是引入更多的颜色变化，就像Prince所说的那样

另一篇文章的答案很好地解释了这个概念。这本书值得一读，但我将引用一些解决方案，以节省人们点击

如果您想用当前的24位颜色使其不那么明显
监视器，您可以：


改变你的设计，在你的设计中引入微妙的色彩变化
渐变（例如从深蓝色到灰绿色）。这导致了不同的结果
RGB通道位可以在不同的时间转换，中断您的
将色带分为更小的不同颜色

更改您的设计以增加动态范围（例如，从纯
白色到纯黑色），这样您就有了更多的颜色栏

更改您的设计，以减少渐变所需的总距离
在上发生，减少频带宽度


…或上述各项的某种组合

我实施了这个策略，但并不完美。如果你真的想摆脱色带，你将不得不作出其他权衡。例如，您可能无法使用纯黑色



之所以停在那里，是因为它应该停在那里，它正在从黑暗变为光明的更快梯度。它必须在那里，据我所知，它不应该造成这个暗带。这一停应该标志着它开始变亮更快的地方。它不应该使任何东西变暗，它肯定会导致它变暗一小段时间，然后返回到较浅的阴影。如果你认为停止有问题，请解释它是什么。但这是故意的，是为了达到我想要的效果。问题是，它不知何故也造成了我不想要的效果（暗带），这似乎不符合我所理解的SVG标准、文档或功能。我对SVG的理解是，这不应该发生。如果SVG或我的理解有问题，这很好，但需要解释，或者至少，如何修复它并保持我想要的效果。额外的标记会创建另一个渐变（颜色移动、渐变）。这就是原因，额外的停止是产生一个额外的颜色变化。这肯定是解决你的问题，让我想想创建一个演示给你看。我无法理解的是，为什么它是故意的，它在做什么？请解释为什么停止会产生这种效果。我知道停止是如何工作的，我知道停止是什么