我一直在試圖弄清楚如何讓我的 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}}°</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 充當塊元素
ibeautiful
2023-09-25 17:03:12
