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

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP

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



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.




2 Answers
2



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


position: absolute




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>





I tried this, but did it wrong and concluded it did not work :( Thanks, I have it working now!
– Paul Biggar
9 hours ago



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>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

Executable numpy error

Image
Clash Royale CLAN TAG #URR8PPP Executable numpy error I'm trying to create an executable file for my code. I've already tried with cx_Freeze and with pyinstaller. Both gives me the same error, which is: "Missing required dependencies 0.format(missing_dependencies))" PS C:UsersGustavoDesktopbuildexe.win32-3.6> python AgendaOficial.py C:UsersGustavoAppDataLocalProgramsPythonPython36-32python.exe: can't open file 'AgendaOficial.py': [Errno 2] No such file or directory PS C:UsersGustavoDesktopbuildexe.win32-3.6> .AgendaOficial.exe Traceback (most recent call last): File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_Freezeinitscripts__startup__.py", line 14, in run module.run() File "C:UsersGustavoAppDataLocalProgramsPythonPython36-32libsite-packagescx_FreezeinitscriptsConsole.py", line 26, in run exec(code, m. dict ) File "AgendaOficial.py", line 8, in File "C:UsersGustavoAppDataLocal...
Read more

PySpark count values by condition

Image
Clash Royale CLAN TAG #URR8PPP PySpark count values by condition I have a DataFrame, a snippet here: [['u1', 1], ['u2', 0]] basically one string ('f') and either a 1 or a 0 for second element ('is_fav'). What I need to do is grouping on the first field and counting the occurrences of 1s and 0s. I was hoping to do something like num_fav = count((col("is_fav") == 1)).alias("num_fav") num_nonfav = count((col("is_fav") == 0)).alias("num_nonfav") df.groupBy("f").agg(num_fav, num_nonfav) It does not work properly, I get in both cases the same result which amounts to the count for the items in the group, so the filter (whether it is a 1 or a 0) seems to be ignored. Does this depend on how count works? count 1 Answer 1 There is no filter here. Both col("is_fav") == 1 and col("is_fav") == 0) are just boolean expressions and count doesn't really care about their value as long a...
Read more

Mass disable jenkins jobs

Image
Clash Royale CLAN TAG #URR8PPP Mass disable jenkins jobs Is it possible to disable a large number of Jenkins jobs in one go? I have a large number of jenkins job I need to disable. Visiting each job in turn and disbling is tedious. 2 Answers 2 https://wiki.jenkins-ci.org/display/JENKINS/Configuration+Slicing+Plugin That works beautifully install it go to http://your_jenkins.com:8080/slicing/jobdisabledbool/? By using configuration slicing plugin: By using this plugin easy to find out anything has enabled or disable jobs and timer separated jobs Manage Jenkins >Config slicing > select options By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Read more