首页猿问 SGV 梯度在停止处变暗

SGV 梯度在停止处变暗

Html5

慕标琳琳 2024-01-03 17:36:25

我正在尝试制作一个行星的球形图像，其夜面处于阴影中，以便在浏览器中渲染为模拟网页，但我一直在与一个奇怪的视觉问题作斗争，我似乎无法弄清楚。下面是在 Chrome 中显示的 SVG 图像片段（IE 中也会出现这种情况），然后放大 3 倍：您会注意到，在昼/夜明暗界线上方，有一条微弱的深色水平带，其宽度约为明暗界线上方距离的 1/3。那不应该在那里，我不明白为什么它在那里或如何摆脱它。（如果您愿意，可以将其保存到 HTML ( .html) 文件（添加 html 和 body 标签），然后在浏览器中运行以查看它。或者将其保存到 SVG 文件 ( .svg)，然后删除div 和 br 标签，如果你想在上面使用任何 SVG 工具。此伪影正好发生在线性渐变停止点之一的位置，特别#stopEaDusk是在线性渐变中的第 33 行#lgdEaNightSide，该渐变被用作覆盖路径的填充#pNight。这种伪影可能看起来非常微弱，但它是真实的，并且在未缩小 300% 时更加明显。我实际的 SVG 还有一个免费的#pDay覆盖层，我将其删除以简化代码。但是当它被添加时，我得到了三个暗带伪像，一个在上面，一个在另一侧的相应位置（我有另一个黎明/黄昏停止点），一个在两个叠加层相遇的中点。当它们三个都可见时，看起来很可怕，所以我不能忽视它。其他要点：据我所知，这不仅仅是这里所建议的视觉错觉，因为即使被炸毁它仍然存在。如果是的话，我仍然需要修复它。我不相信这是这个答案中建议的这个旧的 Chrome 错误，因为它看起来不同，但主要是因为我也在 IE 中看到它（尽管它可能更微弱）。tl,dr：是什么导致了这个黑带？我怎样才能摆脱它？对于这里的问题似乎有些混乱，所以请允许我澄清一下。线性梯度lgdEaNightSide是为了显式效果而编写的，它似乎正在这样做，但它也产生了不希望的副作用，而且据我对 SVg 的最佳理解不应该发生。期望的效果是 pNight 叠加添加： 1. 70% 黑暗，在其弧线顶部（非常高且超出屏幕），平滑地着色到 99% 向下的 60% 黑暗。2. 然后快速从 60% 暗度 99% 下降到 50% 暗度 100% 下降。这是为了提供一个类似黄昏的过渡区域。然而，除此之外，它还增加了不需要的效果： - 在下降到大约 98.8% 时，它突然变暗 - 然后在下降到大约 99.2% 时，它突然再次变亮。这不应该发生，据我所知，我编写的 SVG 不应该这样做。我正在寻找的是如何保持第一个（所需的）效果，同时消除第二个（不需要的）效果。我不需要被告知第二站导致了问题。我知道，我在上面说过了，并且在代码注释中指出了这一点。我不需要答案来告诉我我已经知道的事情。我正在寻找的是：如何修复它，同时保留我最初编写它的视觉效果，以及为什么会发生这种情况，据我所知，它不应该发生。

查看完整描述

2 回答

翻过高山走不出你

TA贡献1875条经验获得超3个赞

代码没有任何问题。

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

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

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

如果您想让当前的 24 位彩色显示器变得不那么明显，您可以：
更改您的设计，在渐变中引入微妙的颜色变化（例如从深蓝色到灰绿色）。这会导致不同的 RGB 通道位可以在不同的时间转换，从而将您的色带分解为较小的差异化颜色。
更改您的设计以增加动态范围（例如从纯白色到纯黑色），以便您可以使用更多颜色条。
更改您的设计以减少渐变发生的总距离，从而减少带的宽度。
......或以上的某种组合。

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

<div style="position:absolute; z-index:1; margin:15px;

width:640px; height:640px;

background-color:#0c0c26">

</clipPath>

</linearGradient>

<radialGradient id="rgdEaSphere" xlink:href="#lgdEaSphere"

gradientUnits="userSpaceOnUse"

cx="0" cy="0"

fx="0" fy="0"

r="3339.05"

</linearGradient>

</defs>

<circle

id="cEarthAir"

cx="0" cy="0" r="3339.05"

style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />

<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

</g>

</svg>

</div>

反对回复 2024-01-03

小唯快跑啊

TA贡献1863条经验获得超2个赞

这是因为您在叠加的渐变中使用了额外的停止值。当您lgdEaNightSide在叠加中使用线性渐变（）来给地球一个夜晚的一面时，如下所示。

您可以看到您正在使用两个偏移值，一个at 0.99和另一个at 1。这就是你的地平带变得微弱、较暗的原因。

</linearGradient>

只需删除一个额外的停止值即可工作，请在下面找到工作代码：

<div style="position:absolute; z-index:1; margin:15px;

width:640px; height:640px;

background-color:black">

</clipPath>

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

<stop style="stop-color:#000000;stop-opacity:0.5;" offset="1.00"

id="stopEaTerminator" />

</linearGradient>

</defs>

<circle id="cEarthAir" cx="0" cy="0" r="3339.05"

style="display:inline;fill-opacity:1;fill:url(#rgdEaSphere)" />

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

</svg>

</div>

反对回复 2024-01-03

2 回答
0 关注
116 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

SGV 梯度在停止处变暗

SGV 梯度在停止处变暗

2 回答

添加回答