给定一个非常简单的 HTML 文件中的 SVG,例如这个:
<html>
<body>
no space between here ><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>< 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 ><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>< and here.
</body>
</html>
关于javascript - 如何使 SVG 在 DOM 中不占用空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51604175/