如何在页面上居中对齐三个 SVG 文件？-PHP中文网问答

我有三个独立的 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;
}



   
      
      
      
      Graphic-center

正如你在我的 CSS 中看到的，我尝试使用 —position:absolute;和位置：相对； - 但我仍然无法让它们在页面中心正确地相互重叠。请记住，一旦 SVG 文件正确居中，我将使用 @keyframes 对它们进行动画处理，并且我需要单独对它们进行动画处理（除非有其他方法），因此每个 SVG 文件的位置无法在页面上固定（即我需要能够移动它们）。有人可以帮忙吗？提前致谢。