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% 黑色的实心圆圈 (#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>

SVG 不透明度如何叠加？

How does SVG opacity stack?

svg

opacity