时间戳

首页 > 解决方案 > SGV 渐变在停止处变暗

html - SGV 渐变在停止处变暗

问题描述

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

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

SVG星球终结者

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

这是 HTML Snippet 中的 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叠加层，我删除了它以简化代码。但是当它被添加时，我得到了三个这样的暗带伪影，一个在上面，一个在另一侧的相应位置（我有另一个黎明/黄昏停止），一个在两个叠加层相遇的中点. 当它们三个都可见时，它看起来很可怕，所以我不能忽略它。

其他要点：

tl，dr：是什么导致了这个黑暗带，我怎样才能摆脱它？

关于这里的问题似乎有些混乱，所以请允许我澄清一下。线性渐变lgdEaNightSide是为显式效果而编写的，它似乎正在这样做，但它也产生了不希望的副作用，并且据我对 SVg 的最佳理解不应该发生。

想要的效果是 pNight 叠加层添加： 1. 70% 的暗度，在其弧形的顶部（非常高且不在屏幕上），平滑地着色到 60% 的暗度，向下 99%。2. 然后从 60% 暗度 99% 下降到 50% 暗度 100% 下降。这是为了提供一个类似黄昏的过渡区域。

然而，除此之外，它还增加了不希望的效果： - 在大约 98.8% 的地方，它突然变暗 - 然后在大约 99.2% 的地方，它又突然变亮了。

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

我正在寻找的是如何保持第一个（想要的）效果，同时摆脱第二个（不想要的）效果。

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

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

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

标签： htmlsvggraphicslinear-gradients

解决方案

代码没有问题。

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

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

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

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

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

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

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

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

…或以上的某种组合。

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

<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>

推荐阅读