搜索

首页  >  问答  >  正文

如何在页面上居中对齐三个 SVG 文件？

我有三个独立的 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 文件的位置无法在页面上固定（即我需要能够移动它们）。有人可以帮忙吗？提前致谢。

P粉998100648P粉998100648451 天前602

全部回复(2)我来回复

  • P粉860897943

    P粉8608979432023-09-08 11:24:17

    要居中对齐并覆盖三个 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”的值来增加或减少三角形和矩形之间的空间。

    回复
    0
  • P粉693126115

    P粉6931261152023-09-08 09:15:16

    只需将它们全部放在同一网格行和列中即可。

    * {
  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>

    回复
    0
  • 取消回复