使用 SVG 堆叠蒙版 div 的内容

Question

我目前坚持尝试在 React 中创建堆叠的 <div> 元素，其中顶级 <div> 的内容被屏蔽（尽管这对于 SVG 元素表示法可能并不重要）。

给定两个响应式样式的<div>s — A 和 B — 都包含一个 <img>，其中 B 绝对位于 A 上方，我想对 <div> B 应用一个内联的任意 SVG 掩码它部分暴露了它下面的<div>A的内容。

在视觉上，我正在尝试实现这样的目标......

两个<div>s，绝对定位，以便它们彼此堆叠：

内联<svg> 的内容：

...用作<div> B 的掩码，使其产生以下效果：

我想避免使用clip-paths，因为他们有limited browser support，我想知道是否有一种方法可以用一种不太复杂的方法来实现这种效果。同样重要的是，我能够在<div>s 中定位<img> 元素，并在需要时添加更多元素——而不是仅仅在<svg> 上设置背景mask-image。

有没有一种不依赖于 SVG <mask> 或 <clipPath> 元素的方法？如果没有，有没有办法在 SVG 掩码中嵌入不仅仅是 <img>（通过 SVG <image>）？

Answer 1

在此示例中，我使用的是图像，因为这是您想要的。我会使用背景图片。另外我使用clip-path 来剪辑第二个div。在第一个示例中，我为此使用了 svg 路径。

#a,
#b {
  outline: 1px solid;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}
#b{
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip); 
}
#wrap {
  position: relative;
}

<div id="wrap">
<div id="a">
  <img width="300" height="300" src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" />
</div>
<div id="b">
  <img  width="300" height="300"  src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" />
</div>
</div>

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0.9 L0.3,.6 .4,.75  .6,.3 .75,.5 1,.1 1,1 0,1z" />
        </clipPath>
    </defs>
</svg>

您也可以使用polygon 函数。

#a,
#b {
  outline: 1px solid;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}
#b{
-webkit-clip-path: polygon(0 90%, 30% 60%, 40% 75%, 60% 30%, 75% 50%, 100% 10%, 100% 100%, 0 100%);
clip-path: polygon(0 90%, 30% 60%, 40% 75%, 60% 30%, 75% 50%, 100% 10%, 100% 100%, 0 100%);
}
#wrap {
  position: relative;
}

<div id="wrap">
<div id="a">
  <img width="300" height="300" src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" />
</div>
<div id="b">
  <img  width="300" height="300"  src ="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" />
</div>
</div>