简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment centrer trois fichiers SVG sur la page ?
P粉998100648
P粉998100648 2023-09-07 14:20:58
0
2
570

J’ai trois fichiers SVG distincts qui, superposés les uns sur les autres, créent un seul graphique. Le premier fichier SVG est un triangle rouge, le second est un cercle bleu à l'intérieur du triangle et le troisième est un rectangle violet à la base du triangle (avec un peu d'espace entre le triangle et le rectangle). Mon objectif est d'avoir les trois fichiers SVG les uns sur les autres au centre de la page. Ci-dessous mon code HTML et 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>

Comme vous pouvez le voir dans mon CSS, j'ai essayé d'utiliser —position:absolute; et position:relative - mais je n'arrive toujours pas à les faire se chevaucher correctement au centre de la page. Gardez à l'esprit que j'utiliserai @keyframes pour animer les fichiers SVG une fois qu'ils seront correctement centrés, et que je devrai les animer individuellement (sauf s'il existe un autre moyen), afin que la position de chaque fichier SVG ne puisse pas être fixée sur la page. (c'est-à-dire que je dois pouvoir les déplacer). Quelqu'un peut-il m'aider ? Merci d'avance.

P粉998100648
P粉998100648

répondre à tous(2)
P粉860897943
P粉8608979432023-09-08 11:24:17 2 plancher

Pour centrer et couvrir trois fichiers SVG, vous pouvez utiliser Flexbox et le positionnement absolu. Voici une version mise à jour du code HTML et 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>

Un div externe avec la classe "graphic" aligne le fichier SVG horizontalement et verticalement à l'aide de Flexbox. Cela garantit qu’ils sont placés au centre de la page.

La position de chaque fichier SVG est définie sur une position absolue pour leur permettre de se chevaucher.

Le fichier SVG circulaire est centré dans son div parent, en utilisant margin: auto et en définissant tous les côtés (haut, droite, bas, gauche) sur 0. Cela centre le cercle horizontalement et verticalement dans le triangle.

Utilisez la propriété Bottom pour positionner le fichier SVG rectangulaire en bas. Vous pouvez ajuster la valeur « inférieure » pour augmenter ou diminuer l'espace entre les triangles et les rectangles.

Comme +0
Ajouter une réponse
P粉693126115
P粉6931261152023-09-08 09:15:16 1 plancher

Placez-les simplement tous dans la même ligne et la même colonne de la grille. 

* {
  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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！