I want to combine three separate SVG files to create one single graphic. The first SVG file is a red triangle, the second is a blue circle inside the triangle, and the third is a purple rectangle beneath the triangle with a little space in between. My objective is to layer all three SVG files on top of each other at the center of the page. Below you can find my HTML and CSS code.
*{
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;
}<!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>In my CSS, I attempted to use position: absolute; and position: relative; but I am still facing difficulties in overlaying them properly at the center of the page. Once the SVG files are centered correctly, I plan to animate them using @keyframes, and I need to animate them individually without fixing their positions on the page. Can anyone provide assistance? Thank you in advance.