Question

在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，但是我想不出正确的方法。

Answer 1

让我知道这是否有帮助：

   Lease Expires . . . . . . . . . . : Monday, August 6, 2018 12:46:13 PM
   Default Gateway . . . . . . . . . : fe80::200:5eff:fe00:204%4
                                       10.161.180.1
   DHCP Server . . . . . . . . . . . : 10.221.228.17
   DHCPv6 IAID . . . . . . . . . . . : 115363651
   DHCPv6 Client DUID. . . . . . . . : 00-01-00-01-22-DE-E5-35-E0-4F-43-29-6E-21
   DNS Servers . . . . . . . . . . . : 10.50.50.50
                                       10.50.10.50
   NetBIOS over Tcpip. . . . . . . . : Enabled

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

Answer 2

您可以只使用p{ color: red;} p{ color: black;} /* Paragraphs will be black*/将其从页面流中删除：

position: absolute

svg {
  position: absolute;
}

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

2 个答案: