使用SVG堆叠蒙版div的内容

Question

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

鉴于两个响应式样式<div>分别为A和B，每个都包含一个<img>，其中B绝对位于A上方，我想对{ {1}} B，以便部分暴露其下面的<div> A的内容。

从视觉上来说，我正在努力实现类似的目标……

两个<div>，位置绝对正确，以使它们彼此堆叠：

内联<div>的内容：

...用作对<svg> B的遮罩，以便产生此效果：

我想避免像使用limited browser support那样使用<div>，并且想知道是否有一种方法可以用一种不太复杂的方法来达到这种效果。同样重要的是，我能够将clip-path内的<img>元素定位，并根据需要添加更多元素-而不是仅在{{1 }}。

是否有一种不依赖SVG <div>或mask-image元素的方式？如果没有，是否有办法在SVG遮罩中嵌入不仅仅是<svg>（通过SVG <mask>）？

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>