代碼沒有任何問題。
條帶的存在是因?yàn)轱@示器沒有足夠的顏色來表示細(xì)微的變化。您正在嘗試在大面積上更改 10% 的不透明度，這對于大多數(shù)顯示器來說是不可能的。
您可以通過切換屏幕來確定這是顯示器問題。根據(jù)顯示器的質(zhì)量和像素密度，您會(huì)看到略有不同的結(jié)果。一些瀏覽器使用抖動(dòng)，這會(huì)減少色帶并犧牲像素化。
解決這個(gè)問題的唯一方法是引入更多的顏色變化，就像普林斯所說的那樣。
如果您想讓當(dāng)前的 24 位彩色顯示器變得不那么明顯，您可以：
更改您的設(shè)計(jì)，在漸變中引入微妙的顏色變化（例如從深藍(lán)色到灰綠色）。這會(huì)導(dǎo)致不同的 RGB 通道位可以在不同的時(shí)間轉(zhuǎn)換，從而將您的色帶分解為較小的差異化顏色。
更改您的設(shè)計(jì)以增加動(dòng)態(tài)范圍（例如從純白色到純黑色），以便您可以使用更多顏色條。
更改您的設(shè)計(jì)以減少漸變發(fā)生的總距離，從而減少帶的寬度。
......或以上的某種組合。
我實(shí)施了這個(gè)策略，但它并不完美。如果你真的想擺脫色帶，你將不得不做出其他權(quán)衡。例如，您可能無法使用純黑色。
<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>
