Saya telah mencoba mencari cara agar elemen SVG saya berfungsi sebagai display: block. Saya memiliki gambar yang saya inginkan tepat di bawah SVG, tetapi gambar itu terus tumpang tindih dengan SVG. Saya telah mencoba mengubah properti menjadi "display: block" serta membuat wadah div di sekitar elemen SVG itu sendiri, tetapi sepertinya tidak ada yang berhasil. Saya yakin ada cara yang mudah, saya hanya tidak bisa mengetahuinya.

#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>

TERIMA KASIH!

0
Cade Gardner 19 Maret 2020, 20:13

1 menjawab

Jawaban Terbaik

CSS Anda menyetel position: absolute ke elemen svg. Tidak seperti elemen yang diposisikan secara statis, elemen yang diposisikan secara mutlak tidak mengambil ruang yang mereka butuhkan untuk muat di wadahnya. Browser menempatkannya pada koordinat yang Anda tentukan dengan top, left, right, dan bottom, baik itu di bawah atau di atas elemen lainnya.

Dari sudut pandang elemen #seasonImage Anda, tidak ada yang menempati ruang di atasnya. Oleh karena itu, browser menempatkannya di atas wadahnya, tumpang tindih dengan SVG yang benar-benar diposisikan.

Jika kami mengomentari atau menghapus position: absolute; (dan properti terkaitnya), browser akan menempatkan gambar langsung di bawah 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>
0
Agus Zubiaga 19 Maret 2020, 18:05