使用SVG rect作为灯箱，整个页面都带有切口吗？

Question

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

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

我不能使用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

问题

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

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

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

解决方案

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

• 添加样式为html的{​​{1}}选择器。这会将position: relative;相对于其放置，使其#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;
}

Answer 2

尝试一下

.full-body{
  position: relative;
margin: -10px;
}
.looong {
  height: 3000px;
  padding: 10px;
}

#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="full-body">
<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>
  </div>