Utilize an SVG to function as a block-level element

I've been struggling to find a solution for making my SVG element act as display: block. I want to display an image right below the SVG, but it keeps overlapping the SVG. I've attempted changing the properties to "display: block" and even creating a div container around the SVG element itself, but nothing seems to be working. I'm sure there's a simple solution out there, I just can't seem to 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!

htmlcsssvgdisplay

Answer №1

The CSS code specifies position: absolute for the svg element. Unlike elements with static positioning, absolutely positioned elements are not confined to the space reserved for them in their containers. Instead, the browser situates them at the specified coordinates using top, left, right, and bottom, potentially overlapping other elements.

For the #seasonImage element, there is no content occupying the space above it. Consequently, the browser positions it at the top of its container, overlapping the absolutely positioned SVG.

If the position: absolute; declaration (and associated properties) is removed or commented out, the browser would position 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a table from a PHP associative array

I've been attempting to organize an associative array in ascending order and then display it in an HTML table, but I've hit a roadblock with an error. I tried searching for solutions here on SO and followed the advice provided in some threads: P ...

phphtmlarrays

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

I've been struggling to implement a drop-down select in conjunction with a table on a page using knockout bindings. The issue arises when I try to use the mapping options in the knockout binding plugin – either the drop-down or the table behaves inc ...

javascripthtmlknockout.js

Center div encroaching on floated left div

https://i.sstatic.net/uwyGY.pngCan someone help me align three divs horizontally? I'm having an issue where the center div is overlapping the left div. What could be causing this problem? <div> <div style={{width:"100px", ...

htmlcssreactjscss-float

Create an HTML document with a text element that has a bottom

I need to emphasize specific text that requires underlining. <div><span class="text">Underlined</span><br>blah blah</div> As a result, the content should be displayed as follows: Underlined --- blah blah In my SASS/SCS ...

htmlcsssass

How to Perfectly Position Content with Bootstrap 3's Full Width Image Carousel

Here's my query: Is there a way to adjust the position of my content (such as text) inside the slider responsively? The text can be positioned anywhere within the Div Slider, for example, at 25% from the left and 50% from the top within the Image Di ...

htmltwitter-bootstrapcss

Update the text on the form submit button after it has been submitted

Is there a way to change the text on a submit button after it has been clicked? I have a form with a button and I want to switch the text from "click" to "Next" once the form has been submitted. <form> <div class="form-grou ...

javascriptjqueryhtmlbuttontext

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Looking for a reliable solution to have a fixed footer that adjusts based on the page content? I've tested multiple samples, but they all fall short when it comes to incorporating AJAX elements. Is there a fixed footer out there that truly works seaml ...

javascriptjqueryhtmlcss

Malfunctioning JavaScript timepiece

I am currently experimenting with using Raphael to create a unique clock feature on my website. My goal is to animate the seconds hand to mimic the movement of a traditional clock. Below is the code snippet I have implemented: window.onload = function( ...

javascripthtmlcssraphael

Struggling with z-index or float issues on Chrome and Safari with CSS styling

Check out my website at I have incorporated the Easy Slider 1.7 plugin from this source and made some custom JavaScript modifications for a banner rotator. The issue I am facing is that on webkit browsers, the navigation links (1,2,3,4,5) on the banner a ...

htmlcssgoogle-chromesafariwebkit

The request parameter is missing when trying to invoke methods on the MultiActionController

During the Spring 3.0 era suppose I have a jsp page with two different links, each calling a different method on MultiActionController <form:form method="POST"> <a href="user.htm?action=add" style="color: blue;">Add</a> <a hr ...

javahtmlspringspring-mvc

How can you use CSS to style an image's title attribute?

I am trying to customize the text displayed when hovering over an image. Despite my efforts, the code I used doesn't seem to be working properly: <body> <img src="img.jpg" title="<span class='title'>title</span>" &g ...

htmlcss

Is it possible to dynamically alter CSS using PHP?

Here's a little query on my mind. Is it possible to dynamically alter the content of a CSS style using PHP in this manner? <?php header("Content-type: text/css; charset: UTF-8"); $color = "red;"; ?> header { color:<?php print $co ...

phpcss

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration

Ways to eliminate the navigation button on an HTML5 video player

I'm having a great experience using the HTML5 video player to continuously play videos. However, I have noticed that when my mouse cursor hovers over the video, a navigation button appears at the end of the screen. I would like to either remove or hid ...

csshtmlvideo

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries

Update the screen layout to a grid when the screen is resized

I have a very specific request regarding the user experience. I want to display four links within a container, positioned next to each other in one row with a vertical line separating them. For example: Link one | Link two | Link three | Link four This ...

htmlcssbootstrap-4flexboxwindow-resize

The CSS show and hide feature is effective across all browsers except for Safari. What steps can be taken to address this issue

My toggle trigger works perfectly in Chrome, but I'm having trouble getting it to work in Safari. Any suggestions? <a href='#show'class='show'>see more --></a> <a href='#hide'class='hide&apos ...

htmlcsssafari

What is the best way to align an equal number of divs in each row?

I need help arranging my divs in rows, with 3 divs in each row. Can someone assist me with this? Here is the code I have written so far: .container { display: flex; flex-wrap: wrap; } .item { border: 2px solid black; width: 100px; height: 10 ...

htmlcss

I am interested in updating the color of the active item on the navbar

I am looking to modify the color of the active page, Here is the HTML code snippet: <html> <head> <title>John Doe - Portfolio</title> <link rel="stylesheet" href="custom-style.css"> <link rel=" ...

htmlcss

Testing the local transmission of form data via Javascript: A Step-by-Step guide

Currently studying how to send forms using JavaScript by manually creating an XMLHttpRequest. Towards the end of the provided example, there's a note: Note: If you want to send data to a third party website, keep in mind that this use of XMLHttpRequ ...

javascripthtmlformsxmlhttprequest