I have three separate SVG files and when they are layered on top of each other they will create one single graphic. The first SVG file is a red triangle, the second is a blue circle that sits inside the triangle and the third is a purple rectangle that sits on the bottom of the triangle(a little space between triangle and rectangle). My goal is to layer all three SVG files on top of each other in the center of the page. Below is my HTML and CSS code.
HTML
type<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graphic-center</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="graphic">
<div>
<img src="stackoverflow/SVG/triangle.svg" class="triangle" width="150px"/>
</div>
<div>
<img src="stackoverflow/SVG/circle.svg" class="circle" width="150px"/>
</div>
<div>
<img src="stackoverflow/SVG/rectangle.svg" class="rectangle" width="150px"/>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.graphic{
height: 100vh;
width: 100vw;
background-color: palegreen;
display: grid;
place-items: center;
position: relative;
}
.triangle{
position: absolute;
}
.circle{
position: absolute;
top:0;
}
.rectangle{
position:relative;
}
As you can see in my CSS, I tried using—position: absolute; and position: relative;—but I still can’t get them to overlay each other properly in the center of the page. Please keep in mind that once the SVG files are properly centered, I am going to animate them using @keyframes, and I need to animate them individually (unless there’s another way) therefore the position of each SVG file cannot be fixed on the page (i.e. I need to be able to move them). Can anyone help? Thanks in advance.
2
Answers
To center align and overlay the three SVG files, you can use flexbox and absolute positioning. Here’s an updated version of your HTML and CSS code:
The outer div with the class "graphic" uses flexbox to center align the SVG files both horizontally and vertically. This ensures they are placed in the center of the page.
The position of each SVG file is set to absolute to allow them to overlay each other.
The circle SVG file is centered within its parent div using margin: auto and setting all sides (top, right, bottom, left) to 0. This centers the circle both horizontally and vertically within the triangle.
The rectangle SVG file is positioned at the bottom using the bottom property. You can adjust the value of "bottom" to add or reduce the space between the triangle and the rectangle.
Just put them all in the same grid row and column.