我有三个独立的 SVG 文件，当它们彼此层叠时，它们将创建一个图形。第一个 SVG 文件是一个红色三角形，第二个是位于三角形内部的蓝色圆圈，第三个是位于三角形底部的紫色矩形（三角形和矩形之间有一点空间）。我的目标是将所有三个 SVG 文件在页面中央相互叠加。下面是我的 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;
}
<!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 中看到的，我尝试使用 —position:absolute;和位置：相对； - 但我仍然无法让它们在页面中心正确地相互重叠。请记住，一旦 SVG 文件正确居中，我将使用 @keyframes 对它们进行动画处理，并且我需要单独对它们进行动画处理（除非有其他方法），因此每个 SVG 文件的位置无法在页面上固定（即我需要能够移动它们）。有人可以帮忙吗？提前致谢。
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
要居中对齐并覆盖三个 SVG 文件，您可以使用 Flexbox 和绝对定位。以下是 HTML 和 CSS 代码的更新版本：
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } .graphic { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: palegreen; position: relative; } .triangle, .circle, .rectangle { position: absolute; } .circle { top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .rectangle { bottom: 20px; /* Adjust this value to add space between the triangle and rectangle */ }<!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"> <img src="stackoverflow/SVG/triangle.svg" class="triangle" width="150px"/> <img src="stackoverflow/SVG/circle.svg" class="circle" width="150px"/> <img src="stackoverflow/SVG/rectangle.svg" class="rectangle" width="150px"/> </div> </body> </html>具有“graphic”类的外部 div 使用 Flexbox 水平和垂直居中对齐 SVG 文件。这确保它们被放置在页面的中心。
每个 SVG 文件的位置都设置为绝对位置，以允许它们相互重叠。
圆形 SVG 文件在其父 div 内居中，使用 margin: auto 并将所有边（上、右、下、左）设置为 0。这使圆在三角形内水平和垂直居中。
使用 Bottom 属性将矩形 SVG 文件定位在底部。您可以调整“bottom”的值来增加或减少三角形和矩形之间的空间。
只需将它们全部放在同一网格行和列中即可。
* { margin: 0; padding: 0; box-sizing: border-box; } .graphic { background-color: palegreen; display: grid; place-items: center; grid-template-columns: 100vw; grid-template-rows: 100vh; } .triangle { z-index: 2; } .circle, .rectangle, .triangle { display: block; grid-column: 1; grid-row: 1; }<div class="graphic"> <div class="rectangle"> <svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> </svg> </div> <div class="triangle"> <svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <text x="150" y="125" font-size="60" text-anchor="middle" fill="yellow">SVG</text> </svg> </div> <div class="circle"> <svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="150" cy="100" r="80" fill="orange" /> </svg> </div> </div>