Saya mempunyai tiga fail SVG berasingan yang apabila berlapis di atas satu sama lain, mencipta satu grafik. Fail SVG pertama ialah segi tiga merah, yang kedua ialah bulatan biru di dalam segi tiga, dan yang ketiga ialah segi empat tepat ungu di pangkal segi tiga (dengan sedikit ruang antara segi tiga dan segi empat tepat). Matlamat saya adalah untuk mempunyai ketiga-tiga fail SVG di atas satu sama lain di tengah halaman. Di bawah ialah kod HTML dan CSS saya.
*{
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>
Seperti yang anda lihat dalam CSS saya, saya cuba menggunakan —position:absolute; dan position:relative - tetapi saya masih tidak dapat membuat mereka bertindih dengan betul di tengah halaman. Perlu diingat bahawa saya akan menggunakan @keyframes untuk menganimasikan fail SVG setelah ia dipusatkan dengan betul, dan saya perlu menghidupkannya secara individu (melainkan ada cara lain), jadi kedudukan setiap fail SVG tidak boleh dibetulkan pada halaman (iaitu saya perlu dapat menggerakkannya). Ada sesiapa boleh tolong? Terima kasih terlebih dahulu.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk menjajarkan tengah dan menutup tiga fail SVG, anda boleh menggunakan Flexbox dan kedudukan mutlak. Berikut ialah versi terkini kod HTML dan 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>Div luar dengan kelas "grafik" menjajarkan fail SVG secara mendatar dan menegak menggunakan Flexbox. Ini memastikan ia diletakkan di tengah-tengah halaman.
Kedudukan setiap fail SVG ditetapkan kepada kedudukan mutlak untuk membolehkannya bertindih antara satu sama lain.
Fail SVG bulat dipusatkan dalam div induknya, menggunakan margin: auto dan menetapkan semua sisi (atas, kanan, bawah, kiri) kepada 0. Ini memusatkan bulatan secara mendatar dan menegak dalam segi tiga.
Gunakan sifat Bawah untuk meletakkan fail SVG segi empat tepat di bahagian bawah. Anda boleh melaraskan nilai "bawah" untuk menambah atau mengurangkan ruang antara segi tiga dan segi empat tepat.
Hanya letakkan kesemuanya dalam baris dan lajur grid yang sama.
* { 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>