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

Question

I am currently trying to use an SVG to highlight a certain element on a page. For that I use an SVG rect as overlay and a mask as cutout.

Now my problem starts with scrolling, the SVG rect is only drawn in the current viewport. When scrolling down the overlay is not shown.

I can't use position: fixed as the cutout would also scroll. For structural reasons on our system I can't use a simple div solution. After resizing the browser window it is drawn the whole length.

Is it possible to force the svg to be drawn for the whole page height?

 .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

The problem

An absolutely positioned box is placed in respect to its nearest positioned container. If a positioned ancestor does not exist the box is instead positioned relative to the "initial containing block".

The "initial containing block" has the dimensions of the viewport so height: 100%; on #outer is therefore equal to the height of the viewport.

For more information on the initial containing block see https://www.w3.org/TR/CSS22/visudet.html#containing-block-details .

The solution

You can achieve the desired result with the following changes:

• Add a html selector with the style position: relative; . This will position #overlay relatively to it making its height: 100%; fill the full height of the html element

 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> 

Answer 2

Try this

 .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>