Question

I have a page and I’m using chrome console to add an SVG element which covers the whole body.
I typed the following commands in the console,

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.style.position = "absolute";
svg.style.left = svg.style.right = svg.style.top = svg.style.bottom = "0px";
svg.style.opacity = 0.5;
svg.style['z-index'] = 100;
svg.style.width = "100%";
svg.style.height = "100%";
document.body.appendChild(svg);

But the SVG element only covers the part of page that is displayed, i.e., if the page is long enough so that we have to scroll down, the whole page is not covered.

Any suggestions?

Answer 1

If you want to fix the element at the viewport, use position:fixed; instead.

Otherwise, do not use 100%, but:

svg.style.height = Math.max(document.body.scrollHeight, 
    document.documentElement.scrollHeight) + 'px';