[ANSWERED] html – Have an SVG act as a block element

Question 1

Your CSS sets position: absolute to the svg element. Unlike statically positioned elements, absolutely positioned elements do not take the space they need to fit in their containers. The Browser places them at the coordinates you specify with top, left, right, and bottom, whether that’s underneath or on top of any other element.

From your #seasonImage element’s point of view, nothing is occupating the space above itself. Therefore, the browser places it at the top of its container, overlapping the absolutely positioned SVG.

If we comment out or remove position: absolute; (and its related properties), the browser will place the image directly below the 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>

Question 2

I have been trying to figure out how to get my SVG element to act as display: block. I have an image I want directly below the SVG, but it keeps overlapping the SVG. I have tried changing the properties to “display: block” as well as creating a div container around the SVG element itself, but nothing seems to work. I am sure there is an easy way, I just can’t figure it out.

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

THANKS!

Bollate

[ANSWERED] html – Have an SVG act as a block element

By

Solution 1 :

Problem :

Comments

Comment posted by enxaneta

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate