英文:
How do I center align three SVG files on a page?
问题
我有三个独立的SVG文件，当它们叠加在一起时，它们将创建一个单一的图形。第一个SVG文件是一个红色三角形，第二个是一个蓝色圆圈，位于三角形内部，第三个是一个紫色矩形，位于三角形底部（三角形和矩形之间有一点空间）。我的目标是将这三个SVG文件都叠加在页面中央。以下是我的HTML和CSS代码。
<!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>
*{
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;
}
正如你在我的CSS中所看到的，我尝试使用了position: absolute;和position: relative;，但仍然无法正确叠加它们在页面中央。请记住，一旦SVG文件正确居中，我将使用@keyframes对它们进行动画处理，我需要对它们进行逐个动画处理（除非有其他方法），因此每个SVG文件的位置不能固定在页面上（即，我需要能够移动它们）。有人可以帮忙吗？提前感谢。
英文:
I have three separate SVG files and when they are layered on top of each other they will create one single graphic. The first SVG file is a red triangle, the second is a blue circle that sits inside the triangle and the third is a purple rectangle that sits on the bottom of the triangle(a little space between triangle and rectangle). My goal is to layer all three SVG files on top of each other in the center of the page. Below is my HTML and CSS code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
As you can see in my CSS, I tried using—position: absolute; and position: relative;—but I still can’t get them to overlay each other properly in the center of the page. Please keep in mind that once the SVG files are properly centered, I am going to animate them using @keyframes, and I need to animate them individually (unless there’s another way) therefore the position of each SVG file cannot be fixed on the page (i.e. I need to be able to move them). Can anyone help? Thanks in advance.
答案1
得分: 0
要使三个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; /* 根据需要调整此值以添加或减少三角形和矩形之间的间距 */
}
外部具有类名“graphic”的div使用flexbox在水平和垂直方向上都居中对齐SVG文件，确保它们位于页面的中心。
每个SVG文件的位置都设置为绝对定位，以允许它们叠加在一起。
圆形SVG文件通过margin: auto并将所有边（上、右、下、左）都设置为0来在其父级div内居中对齐。这将在三角形内水平和垂直居中圆形。
矩形SVG文件使用bottom属性定位在底部。您可以调整“bottom”的值以添加或减少三角形和矩形之间的间距。
英文:
To center align and overlay the three SVG files, you can use flexbox and absolute positioning. Here's an updated version of your HTML and CSS code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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 */
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
The outer div with the class "graphic" uses flexbox to center align the SVG files both horizontally and vertically. This ensures they are placed in the center of the page.
The position of each SVG file is set to absolute to allow them to overlay each other.
The circle SVG file is centered within its parent div using margin: auto and setting all sides (top, right, bottom, left) to 0. This centers the circle both horizontally and vertically within the triangle.
The rectangle SVG file is positioned at the bottom using the bottom property. You can adjust the value of "bottom" to add or reduce the space between the triangle and the rectangle.
答案2
得分: 0
将它们都放在同一网格行和列中。
* {
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>
英文:
Just put them all in the same grid row and column.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案3
得分: -3
你可以使用简单的HTML来实现这个。
英文:
You can do this with simple HTML.
<p align="center">
<img src="img1.svg" /><br>
<img src="img2.svg" /><br>
<img src="img3.svg" /><br>
</p>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论