从 div 背景幕背景中排除多个矩形

Question

我有一个应用程序，我需要在其中 'highlight' 两个单独的矩形区域，方法是用半透明背景覆盖其他所有区域。

经过一些研究，我认为 css clipping/masking 可以在这里使用。但似乎那些正在解决逆向问题（即显示被遮罩覆盖的部分而隐藏其余部分）。我需要的 - 是以某种方式从背景 div 元素中减去 2 个单独的区域。有点剪掉了。

下图大致显示了我要实现的目标：

p.s.

我想这也可以通过在遮罩 svg 中放置多个矩形来实现，这些矩形将形成那种外部背景形状。但在此之前 - 我想知道也许有更好的方法。因为这个解决方案需要认真思考 :)

编辑：

好的，我尝试了建议的解决方案（我的那个被认为是重复的）。它不适用于我需要所有这些动态发生并跨浏览器的情况。正如我所发现的，mask-composite 的支持非常有限。如果有人感兴趣，我为我的用例找到了一个更好的解决方案，它支持动态矩形并且具有更好的跨浏览器支持。

Answer 1

在对蒙版进行更多研究后，我发现了一种非常简洁和简单的方法来实现它。这种方法的好处是您可以简单地操作 svg 属性来更改突出显示的 rects and/or add/remove 的位置，只要你想。它还具有良好的浏览器支持，因为它使用内联 svg 掩码。

因此，这里的想法是默认模式下的遮罩基本上隐藏遮罩像素为黑色的遮罩对象，并显示那些为白色的物体（类似于 Photoshop 遮罩）。中间的一切都是半透明的。

这里我的目标是显示除 2 个（或更多）区域之外的所有背景。这是通过以下步骤实现的：

在将覆盖所有背景的遮罩内创建一个矩形
将其设为白色（显示所有背景）
在 dom（在显示列表上方）
将它们设为黑色（从背景中减去这些区域）

.highlighter-backdrop {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.highlighter-backdrop .backdrop-rect {
    width: 100vw;
    height: 100vh;
    fill: rgba(0, 0, 0, 0.55);
}

.highlighter-backdrop.active {
  opacity: 1;
}

<svg id="backdrop" class="highlighter-backdrop active"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <defs>
        <mask id="highlighterBackdropMask">
            <rect fill="white" height="100%" width="100%" x="0" y="0"></rect>
            <rect x="150" y="150" width="50" height="50" fill="black" />
            <rect x="400" y="250" width="100" height="100" fill="black" />
        </mask>
    </defs>
    <rect class="backdrop-rect" x="0" y="0" mask="url(#highlighterBackdropMask)"></rect>
</svg>

从 div 背景幕背景中排除多个矩形

Exclude multiple rects from a div backdrop background

css

mask

clip-path