Сделать SVG действовать как блочный элемент - PullRequest
Новая
       6

Сделать SVG действовать как блочный элемент

0 голосов
/ 19 марта 2020

Я пытался выяснить, как заставить мой SVG-элемент действовать как display: block. У меня есть изображение, которое я хочу прямо под SVG, но оно продолжает перекрывать SVG. Я попытался изменить свойства на «display: block», а также создать контейнер div вокруг самого элемента 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('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>

СПАСИБО!

1 Ответ

0 голосов
/ 19 марта 2020

Ваш 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>
...