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>