SVG不透明堆棧如何實現？

Question

我想知道，SVG元素如何堆疊它們的不透明度？更具體地說，如果我有一個元素opacity: 0.4，重疊元素的不透明度需要是多少才能導致opacity: 0.8重疊？

重疊處產生的不透明度是多少？ https://jsfiddle.net/HZr7v/18/

Answer 1

答案是0.6667。

規則是透明度結合乘以。因此，如果您有兩個透明度爲60％和33.33％的重疊對象，則重疊區域的透明度將爲（0.6×0.3333）= 0.2。

一個對象的阿爾法值等於1減去其透明度，所以α的組合= 0.4和α= 0.6667等於1 - （1-0.4）×（1-0.6667）= 1 - 0.6× 0.3333 = 1-0.2 = 0.8。

通過說明的方式，這裏的含有旁邊的一個實心圓兩個重疊圓具有0.4的α值和0.6667填充有80％的黑色SVG圖像（#333）：

<svg width="340" height="200" viewBox="0 0 340 200"> 
 
    <circle cx="100" cy="80" r="60" fill="#000" opacity="0.4" /> 
 
    <circle cx="100" cy="120" r="60" fill="#000" opacity="0.6667" /> 
 
    <circle cx="180" cy="100" r="60" fill="#333" opacity="1" /> 
 
    <text x="0" y="30">α=0.4</text> 
 
    <text x="0" y="180">α=0.6667</text> 
 
    <text x="250" y="110">80% black</text> 
 
</svg>