让 SVG 充当块元素

Question

我一直在想办法让我的 SVG 元素充当 display: 块。我在 SVG 正下方有一张我想要的图像，但它一直与 SVG 重叠。我已尝试将属性更改为 "display: block" 以及围绕 SVG 元素本身创建一个 div 容器，但似乎没有任何效果。我相信有一个简单的方法，我就是想不通。

#svg{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        z-index: -1;
        display: block;
        margin-bottom: 10px;
        display: block;
    }
    #svgContainer{
        display: block;
        width: 90%;
        margin: auto;
    }
    #seasonImage{
        background-image: url('images/summer.png');
        width: 120%;
        margin-left: -30px;
        height: auto;
        background-repeat:no-repeat;
        background-size: contain;
        height:200px;
        display: block;
        position: relative;
    }

<div id="svgContainer">
 <svg id="svg" viewBox="-10 -10 220 220" width="90%">
  <text x="80" y="106" id="currentTemp" font-size="18" font-weight="bold" style="fill: #C9AC68">{{currentTemp}}&#176;</text>
  <circle class="background" cx="100" cy="100" r="35" stroke="#C9AC68" />
  <circle class="background" cx="100" cy="100" r="55" stroke="#B25538" />
  <circle class="background" cx="100" cy="100" r="75" stroke="#507282" />
  <circle class="background" cx="100" cy="100" r="95" stroke="#7E8959" />
     
        <circle id="line1" class="overlayLine" cx="100" cy="100" r="35" stroke="#C9AC68" stroke-dasharray="0, 3000" stroke-dashoffset="126" transform="rotate(-90,100,100)" />
  <circle id="line2" class="overlayLine" cx="100" cy="100" r="55" stroke="#B25538" stroke-dasharray="0, 3000" stroke-dashoffset="188" transform="rotate(-90,100,100)" />
  <circle id="line3" class="overlayLine" cx="100" cy="100" r="75" stroke="#507282" stroke-dasharray="0, 3000" stroke-dashoffset="251" transform="rotate(-90,100,100)" />
  <circle id="line4" class="overlayLine" cx="100" cy="100" r="95" stroke="#7E8959" stroke-dasharray="0, 3000" stroke-dashoffset="314" transform="rotate(-90,100,100)" />
 </svg>
</div>

<div id="seasonImage"></div>

谢谢！

Answer 1

您的 CSS 将 position: absolute 设置为 svg 元素。与静态定位元素不同，绝对定位元素不采用 space 它们需要适合其容器的元素。浏览器会将它们放置在您使用 top、left、right 和 bottom 指定的坐标处，无论是在任何其他元素的下方还是上方。

从您的 #seasonImage 元素的角度来看，没有任何东西占据其上方的 space。因此，浏览器将它放在容器的顶部，与绝对定位的 SVG 重叠。

如果我们注释掉或删除 position: absolute;（及其相关属性），浏览器会将图像直接放在 SVG 下方。

#svg {
  /*position: absolute;
      left: 0;
      right: 0;*/
  margin: auto;
  /*z-index: -1;*/
  display: block;
  margin-bottom: 10px;
  display: block;
}

#svgContainer {
  display: block;
  width: 90%;
  margin: auto;
}

#seasonImage {
  background-image: url('https://cataas.com/cat?26');
  width: 120%;
  margin-left: -30px;
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  height: 200px;
  display: block;
  position: relative;
}

<div id="svgContainer">
  <svg id="svg" viewBox="-10 -10 220 220" width="90%">
            <text x="80" y="106" id="currentTemp" font-size="18" font-weight="bold" style="fill: #C9AC68">{{currentTemp}}&#176;</text>
            <circle class="background" cx="100" cy="100" r="35" stroke="#C9AC68" />
            <circle class="background" cx="100" cy="100" r="55" stroke="#B25538" />
            <circle class="background" cx="100" cy="100" r="75" stroke="#507282" />
            <circle class="background" cx="100" cy="100" r="95" stroke="#7E8959" />

            <circle id="line1" class="overlayLine" cx="100" cy="100" r="35" stroke="#C9AC68" stroke-dasharray="0, 3000" stroke-dashoffset="126" transform="rotate(-90,100,100)" />
            <circle id="line2" class="overlayLine" cx="100" cy="100" r="55" stroke="#B25538" stroke-dasharray="0, 3000" stroke-dashoffset="188" transform="rotate(-90,100,100)" />
            <circle id="line3" class="overlayLine" cx="100" cy="100" r="75" stroke="#507282" stroke-dasharray="0, 3000" stroke-dashoffset="251" transform="rotate(-90,100,100)" />
            <circle id="line4" class="overlayLine" cx="100" cy="100" r="95" stroke="#7E8959" stroke-dasharray="0, 3000" stroke-dashoffset="314" transform="rotate(-90,100,100)" />
        </svg>
</div>

<div id="seasonImage"></div>

让 SVG 充当块元素

Have an SVG act as a block element

html

css

svg

display