recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment centrer trois fichiers SVG sur la page ?

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粉998100648P粉998100648453 Il y a quelques jours606

répondre à tous(2)je répondrai

  • P粉860897943

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

    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.

    répondre
    0
  • P粉693126115

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

    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>

    répondre
    0
  • Annulerrépondre