让 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 {&nbsp; /*position: absolute;&nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; right: 0;*/&nbsp; margin: auto;&nbsp; /*z-index: -1;*/&nbsp; display: block;&nbsp; margin-bottom: 10px;&nbsp; display: block;}#svgContainer {&nbsp; display: block;&nbsp; width: 90%;&nbsp; margin: auto;}#seasonImage {&nbsp; background-image: url('https://cataas.com/cat?26');&nbsp; width: 120%;&nbsp; margin-left: -30px;&nbsp; height: auto;&nbsp; background-repeat: no-repeat;&nbsp; background-size: contain;&nbsp; height: 200px;&nbsp; display: block;&nbsp; position: relative;}<div id="svgContainer">&nbsp; <svg id="svg" viewBox="-10 -10 220 220" width="90%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <text x="80" y="106" id="currentTemp" font-size="18" font-weight="bold" style="fill: #C9AC68">{{currentTemp}}&#176;</text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle class="background" cx="100" cy="100" r="35" stroke="#C9AC68" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle class="background" cx="100" cy="100" r="55" stroke="#B25538" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle class="background" cx="100" cy="100" r="75" stroke="#507282" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle class="background" cx="100" cy="100" r="95" stroke="#7E8959" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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)" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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)" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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)" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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)" />&nbsp; &nbsp; &nbsp; &nbsp; </svg></div><div id="seasonImage"></div>