javascript - 使用 SVG 矩形作为整个页面的剪切灯箱？

Question

我目前正在尝试使用 SVG 来突出显示页面上的某个元素。为此，我使用 SVG rect 作为叠加层，使用 mask 作为剪切。

现在我的问题从滚动开始，SVG rect 仅在当前视口(viewport)中绘制。向下滚动时不显示叠加层。

我不能使用 position: fixed 因为切口也会滚动。由于我们系统的结构原因，我不能使用简单的 div 解决方案。调整浏览器窗口大小后，它会被绘制成整个长度。

是否可以强制为整个页面高度绘制 svg？

.looong {
  height: 3000px;
}
#cutout {
  box-sizing: content-box;
  position: absolute;
  z-index: 9999997;
  background-color: #FFF;
  background-color: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0,0,0,.4);
  transition: all .3s ease-out;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  z-index: 9999997;
}

<div class="looong">
  Some Text, Big div
</div>
<svg id="overlay">
	<defs>
		<mask id="overlay-mask">
			<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
			<rect id="cutout" x="100" y="200" width="100" height="50" fill="black"></rect>
		</mask>
	</defs>
	<rect x="0" y="0" width="100%" height="100%" fill="black" fill-opacity="0.6" mask="url(#overlay-mask)" ></rect>
</svg>

Answer 1

问题

绝对定位的盒子相对于其最近的定位容器放置。如果定位的祖先不存在，则框将相对于“初始包含 block ”定位。

“初始包含 block ”具有视口(viewport)的尺寸，因此 #outer 上的 height: 100%; 因此等于视口(viewport)的高度。

有关初始包含 block 的更多信息，请参阅 https://www.w3.org/TR/CSS22/visudet.html#containing-block-details .

解决方案

您可以通过以下更改获得所需的结果:

• 添加样式为position: relative; 的html 选择器。这将相对于它定位 #overlay 使其 height: 100%; 填充 html 元素的整个高度

html {
  position: relative;
}
.looong {
  height: 3000px;
}
#cutout {
  box-sizing: content-box;
  position: absolute;
  z-index: 9999997;
  background-color: #FFF;
  background-color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 4px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .4);
  transition: all .3s ease-out;
}
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999997;
}

<div class="looong">
  Some Text, Big div
</div>
<svg id="overlay">
	<defs>
		<mask id="overlay-mask">
			<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
			<rect id="cutout" x="100" y="200" width="100" height="50" fill="black"></rect>
		</mask>
	</defs>
	<rect x="0" y="0" width="100%" height="100%" fill="black" fill-opacity="0.6" mask="url(#overlay-mask)" ></rect>
</svg>