Testing masks and clips

Testing masks and clips on divs.

by David Iglesias

HTML

<div class="container">
  <div class="platform_view pv_1">
    PV 1
  </div>
  <div class="platform_view pv_2">
    PV 2
  </div>
  <div class="glass_pane"></div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width=320 height=240>
  <defs>
    <mask id="fromApp" x="0" y="0" width="320" height="240">
      <rect fill="white" width="320" height="240"></rect>
      <rect fill="black" width="160" height="80" x="10" y="10" />
      <rect fill="black" width="160" height="80" x="40" y="100" />
    </mask>
    <clipPath id="simple">
      <rect x="160" y="120" width="48" height="48" fill="black"></rect>
    </clipPath>
    <clipPath id="holes">
      <rect x="0" y="0" width="320" height="240" fill="black" mask="url(#fromApp)"></rect>
    </clipPath>
  </defs>
  <rect x="0" y="0" width="320" height="240" fill="black" mask="url(#fromApp)"></rect>
</svg>

CSS

* { box-sizing: border-box; }

.container {
  width: 320px;
  height: 240px;
  border: 1px solid black;
  background: #eee;
  position: relative;
}

.platform_view {
  width: 160px;
  height: 80px;
  border: 1px solid black;
  margin: 10px;
}

.pv_2 {
  overflow: auto;
  line-height: 1000px;
  margin-left: 40px;
}

.glass_pane {
  display: block;
  overflow: hidden;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #fabada;
  position: absolute;
}

.glass_pane {
  clip-path: url(#simple);
}

JavaScript

document.querySelector('.glass_pane').addEventListener('pointermove', function(event) {
	console.log(event.x, event.y);
}, { passive: true});