javascript - 如何使 SVG 在 DOM 中不占用空间?

标签 javascript html css svg

给定一个非常简单的 HTML 文件中的 SVG,例如这个:

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

我想将其作为叠加层放在我的 HTML 页面中:我不希望它占用 DOM 中的任何空间,而只是出现在背景中。我怎样才能做到这一点?我认为它是 CSS,但我想不出正确的咒语。

最佳答案

如果这有帮助,请告诉我:

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>

关于javascript - 如何使 SVG 在 DOM 中不占用空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51604175/

相关文章:

css - 滑动可扩展内嵌菜单

javascript - 如何使 doc.id 可点击项目?

javascript - .shift() 之后调用函数

javascript - 如何使用条件函数获取元素的索引

javascript - 不使用 parseInt 对以 2 为基数的数字求和的函数

html - 如何在 Django 和 Python Shell 中开始调试 POST 和 GET 请求

html - Css 属性选择器,其中属性名称包含 : in it

php - PHP-如何制作PHP以在标题404上显示Web服务器404错误页面?

html - 背景位置和不透明度

html - 带圆 Angular 的链接图像的交互区域