我一直在試圖弄清楚如何讓我的 SVG 元素充當(dāng) display: 塊。我想要一個(gè)位于 SVG 正下方的圖像，但它始終與 SVG 重疊。我嘗試將屬性更改為“display: block”以及在 SVG 元素本身周?chē)鷦?chuàng)建一個(gè) div 容器，但似乎沒(méi)有任何效果。我確信有一個(gè)簡(jiǎn)單的方法，我只是想不出來(lái)。#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>