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不透明度如何叠加？

1 个答案: