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.

对象的alpha值等于1减去其透明度,因此α= 0.4和α= 0.6667的组合等于1 - (1-0.4)×(1-0.6667)= 1 - 0.6×0.3333 = 1 - 0.2 = 0.8.

举例来说,这是一个包含两个重叠圆的SVG图像,其中alpha值为0.4和0.6667,旁边是一个填充80%black(#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>