html - 停止时 SGV 梯度变暗

Question

我正在尝试制作一个带有阴影的夜晚行星的球形图像，以在浏览器中渲染以用于模拟网页，但我一直在与一个我似乎无法弄清楚的奇怪视觉问题作斗争。

这是在 Chrome 中显示的 SVG 图像片段(这也发生在 IE 中)，然后放大 3 倍:



您会注意到，在昼/夜终结符的正上方，有一条较暗的微弱水平带，宽度约为其在终结符上方的距离的 1/3。那不应该在那里，我无法弄清楚它为什么在那里或如何摆脱它。

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

<div style="position:absolute; z-index:1; margin:15px; 
            width:640px; height:640px; 
            background-color:black">

  <svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" preserveAspectRatio="xMidYMid meet" clip-path="url(#svgEaClip)" transform="scale(1.0,1.0)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- NOTE: All internal units are in KM (or %)  -->
    
                <defs id="defsEa">
                    <clipPath id="svgEaClip">
                        <rect width="100%" height="100%" />
                    </clipPath>
                    <linearGradient id="lgdEaSphere">
                        <stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00" id="stopEarthCenter" />
                        <stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30" id="stopEarthInner" />
                        <stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31" id="stopEarthMid" />
                        <stop style="stop-color:#00A064;stop-opacity:1.00" offset="0.95264" id="stopEarthOuter" />
                        <stop style="stop-color:#44ffff;stop-opacity:0.66" offset="0.95264" id="stopAirInner" />
                        <stop style="stop-color:#44ffff;stop-opacity:0.10" offset="1.00" id="stopAirOuter"  />
                    </linearGradient>
                    <radialGradient id="rgdEaSphere"  xlink:href="#lgdEaSphere"
                        gradientUnits="userSpaceOnUse"
                        cx="0" cy="0"
                        fx="0" fy="0"
                        r="3339.05" 
                        />
    
                    <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>
                </defs>
    
                <g id="gEaAll" transform="scale(1.2,1.2)" >
                    <g id="gEaSunFacing" >
                        <!-- contains everything that stays oriented with the Sun -->
                        <circle
                            id="cEarthAir"
                            cx="0" cy="0" r="3339.05"
                            style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />
                        <!--  overlay to give Earth a night side.  -->
                        <path id="pNight" 
                            style="stroke:none; fill:url(#lgdEaNightSide)"
                            d="M -3189.05,0 
                                A 3189.05,15945.25 0 1,1 3189.05,0
                                Z" 
                            />
                    </g>
                </g>
    
            </svg>

</div>

(如果您愿意，可以将其保存到 HTML (.html) 文件(添加 html 和 body 标签)，然后在浏览器中运行以查看它。或者将其保存到 SVG 文件 (.svg)，然后删除div 和 br 标签，如果你想在上面使用任何 SVG 工具。

该伪影发生在线性梯度停止之一的位置，特别是 #stopEaDusk在第 33 行，在线性渐变中 #lgdEaNightSide ，用作覆盖路径 #pNight 的填充.这种伪影可能看起来很微弱，但当没有缩小 300% 时，它是真实的并且更加明显。我的实际 SVG 也有一个免费的 #pDay我删除的覆盖层以简化代码。但是当它被添加时，我得到了三个暗带伪像，一个在上面，一个在另一边的相应位置(我有另一个黎明/黄昏停止)，一个在两个叠加层相遇的中点.当它们三个都可见时，它看起来很可怕，所以我不能忽略它。

其他要点:

据我所知，这不仅仅是建议的视觉错觉 here ，因为它即使被炸毁也仍然存在。如果是，我仍然需要修复它。

我不相信是这个old Chrome bug正如 this answer 中所建议的，因为它看起来不同，但主要是因为我也在 IE 中看到它(尽管它可能更暗)。

tl,dr: 是什么导致了这个黑暗带，我该如何摆脱它？

这里的问题似乎有些困惑，所以请允许我澄清一下。线性渐变 lgdEaNightSide是为了一个明确的效果而写的，它似乎正在做，但它也产生了一个不想要的副作用，这不是故意的，据我所知，SVG 不应该发生。

预期的效果是 pNight 叠加层添加:
1. 70% 的暗度，在其弧线的顶部(非常高且离屏幕)，在向下 99% 的过程中平滑地着色到 60% 的暗度。
2. 然后从 60% 黑暗 99% 向下快速着色，到 50% 黑暗 100% 向下。这是为了提供一个黄昏般的过渡区。

然而，除此之外，它还增加了不想要的效果:
- 在大约 98.8% 的下降过程中，突然变暗
- 然后在大约 99.2% 的下降过程中，它突然又变轻了。

这不应该发生，据我所知，我写的 SVG 不应该这样做。

我正在寻找的是如何保持第一个(期望的)效果，同时摆脱第二个(不期望的)效果。

我不需要被告知第二站导致了问题。我知道，我在上面说过，并在代码注释中指出。我不需要答案来告诉我我已经知道的事情。我正在寻找的是:

如何在保留我最初编写它的视觉效果的同时修复它，以及

为什么会发生，当 AFAIK 时，它不应该发生。

Answer 1

代码没有任何问题。

出现 strip 是因为显示器没有足够的颜色来表示细微的变化。您正在尝试在大范围内更改 10% 的不透明度，这是大多数显示器无法实现的。

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

解决这个问题的唯一方法是像普林斯那样引入更多的颜色变化。

另一篇文章的答案很好地解释了这个概念。值得一读，但我将引用解决方案以节省人们的点击次数。 https://stackoverflow.com/a/11274627/6794536

If you want to make it less obvious with your current 24-bit color monitor, you can:

• Change your design to introduce a subtle color shift into your gradient (e.g. from dark blue to gray-green). This causes different RGB channels bits can transition at different times, breaking up your bands into a smaller differentiated colors.

• Change your design to increase your dynamic range (e.g. from pure white to pure black) so that you have more color bars to work with.

• Change your design to reduce the overall distance that the gradient occurs over, reducing the widths of the bands.

…or some combination of the above.

我实现了这个策略，但它并不完美。如果您真的想摆脱色带，则必须进行其他权衡。例如，您可能无法使用纯黑色。

<div style="position:absolute; z-index:1; margin:15px; 
            width:640px; height:640px; 
            background-color:#0c0c26">

  <svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" preserveAspectRatio="xMidYMid meet" clip-path="url(#svgEaClip)" transform="scale(1.0,1.0)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- NOTE: All internal units are in KM (or %)  -->
    
                <defs id="defsEa">
                    <clipPath id="svgEaClip">
                        <rect width="100%" height="100%" />
                    </clipPath>
                    <linearGradient id="lgdEaSphere">
                        <stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00" id="stopEarthCenter" />
                        <stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30" id="stopEarthInner" />
                        <stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31" id="stopEarthMid" />
                        <stop style="stop-color:#00A064;stop-opacity:1.00" offset="0.95264" id="stopEarthOuter" />
                        <stop style="stop-color:#44ffff;stop-opacity:0.66" offset="0.95264" id="stopAirInner" />
                        <stop style="stop-color:#44ffff;stop-opacity:0.10" offset="1.00" id="stopAirOuter"  />
                    </linearGradient>
                    <radialGradient id="rgdEaSphere"  xlink:href="#lgdEaSphere"
                        gradientUnits="userSpaceOnUse"
                        cx="0" cy="0"
                        fx="0" fy="0"
                        r="3339.05" 
                        />
    
                    <linearGradient id="lgdEaNightSide" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
                        <stop style="stop-color:#00033e;stop-opacity:0.7;" offset="0.00" id="stopEaMidnight"></stop>
                        <!-- this stop seems to cause the artifact -->
                        <stop style="stop-color:#090d24;stop-opacity:0.6;" offset="0.99" id="stopEaDusk"></stop> 
                        <stop style="stop-color:#000;stop-opacity:0.5;" offset="1.00" id="stopEaTerminator"></stop>
                    </linearGradient>
                </defs>
    
                <g id="gEaAll" transform="scale(1.2,1.2)" >
                    <g id="gEaSunFacing" >
                        <!-- contains everything that stays oriented with the Sun -->
                        <circle
                            id="cEarthAir"
                            cx="0" cy="0" r="3339.05"
                            style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />
                        <!--  overlay to give Earth a night side.  -->
                        <path id="pNight" 
                            style="stroke:none; fill:url(#lgdEaNightSide)"
                            d="M -3189.05,0 
                                A 3189.05,15945.25 0 1,1 3189.05,0
                                Z" 
                            />
                    </g>
                </g>
    
            </svg>

</div>