Укладка замаскированного содержимого div с помощью SVG

Question

В настоящее время я застрял при попытке создать сложенные <div> элементы, в которых верхний уровень <div> маскирует свое содержимое, в React (хотя это, вероятно, неважно, кроме как для обозначения элементов SVG).

С учетом двух <div> s - A и B, отвечающих в стиле, каждый из которых содержит <img> каждый, где B абсолютно расположен над A, я хотел бы применить встроенную произвольную SVG-маску к <div> B, чтобыон частично раскрывает содержимое <div> A под ним.

Визуально я пытаюсь достичь чего-то подобного ...

Два <div> с, абсолютно расположенные так, чтобы они складывалисьдруг на друга:

Содержимое inline <svg>:

... Используетсяв качестве маски против <div> B, чтобы она производила этот эффект:

Я хочу избегать использования clip-path s, поскольку они имеют ограниченную поддержку браузера и мне интересно, есть ли способ достичь этого эффекта с помощью менее сложного подхода.Также важно, чтобы я мог расположить элементы <img> в пределах <div> s и добавлять больше элементов, если необходимо, вместо того, чтобы просто установить фон mask-image для <svg>.

Есть ли способ сделать это, не опираясь на элементы SVG <mask> или <clipPath>?А если нет, есть ли способ вставить больше, чем просто <img> (через SVG <image>) в маску SVG?

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>