How do I make an SVG take no space in the DOM?

Question

Given an extremely simple SVG in a html file, such as this one:

 <html> <body> no space between here &gt;<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>&lt; and here. </body> </html>

I want to put this in my HTML page as an overlay: I don't want it to take up any space in the DOM, and just appear in the background. How can I do this? I presume it's CSS but I can't figure out the right incantation.

Answer 1

Let me know if this helps:

 body { position: relative; } svg { /* absolute positioning takes svg out of flow of the document, it is positioned relative to it's closest parent with 'relative' or 'absolute' positioning, in this case the body */ position: absolute; /* setting this makes it so that the svg won't eat up any clicks meant for elements underneath it */ pointer-events: none; /* you can use these offsets to change where exactly the svg is positioned */ top: 0; left: 0; }

 <html> <body> no space between here &gt;<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>&lt; and here. </body> </html>

Answer 2

You can just use position: absolute to take it out of the page flow:

 svg { position: absolute; }

 <html> <body> no space between here &gt;<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>&lt; and here. </body> </html>

How do I make an SVG take no space in the DOM?

Question

2 answers

solution1
2 ACCPTED 2018-07-31 01:14:19

solution2
1 2018-07-31 01:13:47

How do I make an SVG take no space in the DOM?

Question

2 answers

solution1 2 ACCPTED 2018-07-31 01:14:19

solution2 1 2018-07-31 01:13:47

solution1
2 ACCPTED 2018-07-31 01:14:19

solution2
1 2018-07-31 01:13:47