有没有一种方法可以绘制形状，使其填充在组内不透明，但对背景透明

Question

我正在尝试寻找工具来渲染一组重叠的形状，以便在组内填充不透明（因此不显示重叠的圆轮廓），但同时填充组成员对下面的任何背景层都是透明的。

希望这张图能看得更清楚：

我能够完成的是一堆带有空填充的圆圈（图中的 d）。我想要实现的（图像中的 h）是隐藏在重叠中的圆形轮廓，以便轮廓圆形组中的层次清晰，但整个组具有透明填充，以便背景层（蓝色 -图片中的填充气泡）是可见的。

组中圆圈的周长将由数据确定并且可能是动态的，所以我想它们需要作为单独的对象可识别，所以我不能将它们变成某种复合路径来获得我需要的东西。

根据我的发现，这不能单独在 SVG 或 CSS 中完成，所以我想知道 Pixi.js 或通用 WebGL 中是否有一些淘汰过滤器或任何类型的解决方案将允许我在层内设置不同的透明度行为，并与其他层不同。

Answer 1

也许是这样的。

您可以根据需要添加更多圈子。蒙版圆圈彼此重叠，但作为一个整体，当应用于矩形时，蒙版部分是透明的。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 200 200" >
  <defs>
    <mask id="circle-mask" width="1" height="1" maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox">
      <circle cx="0.2" cy="0.2" r="0.1" stroke="white" stroke-width="0.01"/>  
      <circle cx="0.3" cy="0.3" r="0.1" stroke="white" stroke-width="0.01"/>  
    </mask>
  </defs>
  <circle cx="30" cy="60" r="20" fill="blue" fill-opacity="0.5"/>
  <rect width="200" height="200" mask= "url(#circle-mask)" fill="blue"/>
</svg>

有没有一种方法可以绘制形状，使其填充在组内不透明，但对背景透明

Is there a way to draw shapes so that their fills act as opaque within the group but are transparent towards the background

svg

webgl

pixi.js