Stacking masked divs' contents with SVG - html

Question

I'm currently stuck with trying to create stacked <div> elements where the top-level <div> has its content masked, in React (although this is likely unimportant other than for SVG element notation).
Given two responsively-styled <div>s — A and B — both containing an <img> each, where B is absolutely positioned above A, I would like to apply an inline, arbitrary SVG mask to <div> B so that it partially exposes the content of <div> A below it.
Visually, I am trying to achieve something like this...
Two <div>s, absolutely positioned so that they stack on top of one another:
An inline <svg>'s content:
...Is used as a mask against <div> B so that it produces this effect:
I want to avoid using clip-paths as they have limited browser support, and am wondering if there is a way of achieving this effect with a less complex approach. It is also important that I'm able to position the <img> elements within the <div>s, and add more elements if needed — rather than just setting a background mask-image on the <svg>.
Is there a way of doing this that does not rely on SVG <mask> or <clipPath> elements? And if not, is there a way to embed more than just an <img> (via SVG <image>) in the SVG mask?

Answer 1

In this example I'm using images, since this is what you want. I would have used background images. Also I'm using clip-path to clip the second div. In the first example I'm using an svg path for this.
#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>
Alternatively you can use the polygon function.
#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>