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

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

您可以使用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>

相关内容

最新更新

热门标签：