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

gwo2fgha 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(109)

我有三个独立的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：绝对值;和位置：相对的;-但我仍然不能让它们在页面的中心适当地相互重叠。请记住，一旦SVG文件被正确居中，我将使用@keyframes动画它们，我需要单独动画它们（除非有其他方法），因此每个SVG文件的位置不能固定在页面上（即：我需要能够移动它们）。有人能帮忙吗？先谢谢你了。

css

来源：https://stackoverflow.com/questions/76477460/how-do-i-center-align-three-svg-files-on-a-page

3条答案

按热度按时间

ax6ht2ek1#

只要把它们都放在同一个网格行和列中。

* {
  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）回复(0）举报 2023-06-25

aydmsdu92#

要居中对齐和覆盖三个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中使用边距居中：自动并将所有边（顶部、右侧、底部、左侧）设置为0。这使圆在三角形内水平和垂直方向居中。
矩形SVG文件使用bottom属性位于底部。您可以调整“bottom”的值，以增加或减少三角形和矩形之间的间距。

赞(0）回复(0）举报 2023-06-25

ubby3x7f3#

你可以用简单的HTML来实现。

<p align="center">
<img src="img1.svg"></br>
<img src="img2.svg"></br>
<img src="img3.svg"></br>
</p>

赞(0）回复(0）举报 2023-06-25

我来回答

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

3条答案

相关问题

热门标签

最新问答