具有多個梯度的SVG透明度

我正試圖找出4路梯度填充的最佳模型。我的最新型號是this小提琴：具有多個梯度的SVG透明度

<svg height="360" width="400" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <clipPath id="C"> 
     <path d="M 100 200 L 300 58 L 400 250 L 300 341 Z" /> 
    </clipPath> 
    <radialGradient id="G1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
     <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" /> 
    </radialGradient> 
    <radialGradient id="G2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
     <stop offset="0%" style="stop-color:rgb(0,255,0); stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" /> 
    </radialGradient> 
    <radialGradient id="G3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
     <stop offset="0%" style="stop-color:rgb(0,0,255); stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" /> 
    </radialGradient> 
    <radialGradient id="G4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
     <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(128,128,64); stop-opacity:0" /> 
    </radialGradient> 
    </defs> 
    <ellipse cx="100" cy="200" rx="200" ry="200" clip-path="url(#C)" fill="url(#G1)" /> 
    <ellipse cx="300" cy="58" rx="200" ry="200" clip-path="url(#C)" fill="url(#G2)" /> 
    <ellipse cx="400" cy="250" rx="200" ry="200" clip-path="url(#C)" fill="url(#G3)" /> 
    <ellipse cx="300" cy="341" rx="200" ry="200" clip-path="url(#C)" fill="url(#G4)" /> 
</svg>

附帶結果：

enter image description here

但是當我改變<ellipse>元素（參見this小提琴）的順序：

<ellipse cx="100" cy="200" rx="200" ry="200" clip-path="url(#C)" fill="url(#G1)" /> 
    <ellipse cx="300" cy="58" rx="200" ry="200" clip-path="url(#C)" fill="url(#G2)" /> 
    <ellipse cx="300" cy="341" rx="200" ry="200" clip-path="url(#C)" fill="url(#G4)" /> 
    <ellipse cx="400" cy="250" rx="200" ry="200" clip-path="url(#C)" fill="url(#G3)" />

結果更改爲：

enter image description here

這意味着透明度計算方式不同。無論元素的順序如何，我都希望以相同的結果計算透明度。這個問題的解決方案是什麼_

來源

2012-06-17 Ωmega

我不確定你爲什麼期望結果不會不同？你沒有什麼是完全透明的，當然如果你在頂部有不同的元素，它會看起來不同。 – robertc

@robertc - 尋找解決方案，其中的元素將不會被排序，所以沒有什麼會在其他層之上，在同一層，等於，... –

元素總是在SVG中排序。 – robertc

在該表面上的任何給定點上，最終顏色是通過考慮所有覆蓋該點的元素（按其堆疊順序）計算出來的。 SVG中總是有一個堆棧順序，你不能把所有的梯度作爲一個整體。

真正的四向梯度必須在每個點處混合一種顏色，每種顏色的量等於該特定點處從顏色源到形狀邊緣的距離的百分比。但是，這不能通過堆疊圖層獲得，原因如下：

假設您的圖層具有從顏色到透明度的均勻過渡，並且圖層順序爲紅色，綠色，藍色，黃色，並且紅色爲（50％黃色+ 50％以下的顏色），其變爲（50％黃色+ 50％（50％藍色+ 50％以下顏色）） - >（50％黃+ 50％（50％藍+ 50％（50％綠+ 50％（50％紅+ 50％背景）））） - >（50％黃+ 25％藍+12.5％綠色+ 6.25％紅色），這遠遠低於一切組合的50％。

您可以嘗試調整每層變得透明的突然程度，因爲知道最終的透明度不是單獨由該圖層的透明度給出的，而是由它上面的圖層的不透明程度決定的。所以，如果你想獲得中間每一層的25％，那麼你就必須求解方程：（y％黃+（100-y）％（b％藍+（100-b）％（g ％綠色+（100-g）％（r％紅色））））=（25％黃色+ 25％藍色+ 25％綠色+ 25％紅色）。雖然這個方程很容易求解（y = 25，b = 33.3，g = 50，r = 100），但方程必須站在曲面的每個點上，我懷疑你可以用簡單的徑向或線性漸變。

來源

2012-06-26 16:33:35

具有多個梯度的SVG透明度

回答

相關問題