2 回答

TA貢獻1875條經驗 獲得超3個贊
代碼沒有任何問題。
條帶的存在是因為顯示器沒有足夠的顏色來表示細微的變化。您正在嘗試在大面積上更改 10% 的不透明度,這對于大多數顯示器來說是不可能的。
您可以通過切換屏幕來確定這是顯示器問題。根據顯示器的質量和像素密度,您會看到略有不同的結果。一些瀏覽器使用抖動,這會減少色帶并犧牲像素化。
解決這個問題的唯一方法是引入更多的顏色變化,就像普林斯所說的那樣。
如果您想讓當前的 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>

TA貢獻1863條經驗 獲得超2個贊
這是因為您在疊加的漸變中使用了額外的停止值。當您lgdEaNightSide在疊加中使用線性漸變()來給地球一個夜晚的一面時,如下所示。
您可以看到您正在使用兩個偏移值,一個at 0.99和另一個at 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>
只需刪除一個額外的停止值即可工作,請在下面找到工作代碼:
<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.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>
- 2 回答
- 0 關注
- 200 瀏覽
添加回答
舉報