让 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元素。与静态定位的元素不同，绝对定位的元素不占用其容器所需的空间。top浏览器将它们放置在您用、left、right和指定的坐标处bottom，无论它是在任何其他元素的下面还是上面。

从#seasonImage元素的角度来看，没有任何东西占据其自身上方的空间。因此，浏览器将其放置在其容器的顶部，与绝对定位的 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>