从 div 背景背景中排除多个矩形 [重复]答案

【问题标题】：Exclude multiple rects from a div backdrop background [duplicate]从 div 背景背景中排除多个矩形 [重复]
【发布时间】：2020-07-30 21:03:55
【问题描述】：

我有一个应用程序，我需要通过用半透明背景覆盖其他所有区域来“突出显示”两个独立的矩形区域。

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

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

附言

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

编辑：

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

【问题讨论】：

我不同意结束这个问题的决定。我相信我找到并想分享的解决方案更适合该特定场景。并且还拥有更好的浏览器支持。

标签： css mask clip-path

【解决方案1】：

在对掩码进行了更多研究之后，我发现了一种非常简洁且简单的方法来实现这一点。这种方法的好处是您可以简单地操纵 svg 属性来更改突出显示的矩形的位置和/或添加/删除任意数量的矩形。它还具有良好的浏览器支持，因为它使用内联 svg 掩码。

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

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

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

.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>

【讨论】：