亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

SGV 梯度在停止處變暗

SGV 梯度在停止處變暗

慕標琳琳 2024-01-03 17:36:25
我正在嘗試制作一個行星的球形圖像,其夜面處于陰影中,以便在瀏覽器中渲染為模擬網頁,但我一直在與一個奇怪的視覺問題作斗爭,我似乎無法弄清楚。下面是在 Chrome 中顯示的 SVG 圖像片段(IE 中也會出現這種情況),然后放大 3 倍:您會注意到,在晝/夜明暗界線上方,有一條微弱的深色水平帶,其寬度約為明暗界線上方距離的 1/3。那不應該在那里,我不明白為什么它在那里或如何擺脫它。(如果您愿意,可以將其保存到 HTML ( .html) 文件(添加 html 和 body 標簽),然后在瀏覽器中運行以查看它?;蛘邔⑵浔4娴?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">


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


查看完整回答
反對 回復 2024-01-03
?
小唯快跑啊

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>


查看完整回答
反對 回復 2024-01-03
  • 2 回答
  • 0 關注
  • 200 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號