Simple graphique arrondi en HTML, CSS au format SVG

J’ai cherché une manière simple de mettre en valeur un nombre, une note ou un pourcentage. J’avais déjà observé ce graphique arrondi permettant de visualiser un nombre.

Il existe certainement des bibliothèques JavaScript qui permettent de mettre en valeur des données à travers de beaux graphiques. Mais je ne souhaitais pas alourdir mes pages. J’ai donc décidé de coder un simple rond en SVG et de le mettre en valeur avec un peu de CSS.

Mise en pratique sur codepen.

Coder un cercle en SVG

Généralement, on utilisera des logiciels de graphisme pour créer des visuels vectoriels. (Je pense ici à Illustrator pour la création d’images vectorielles), mais ici nous souhaitons créer un cercle très simple en SVG. On utilisera une balise <svg> dans laquelle nous insérerons une balise <path>. (J’aurais également pu utiliser une balise <circle>).

Ici je dessine un cercle entier en SVG :

<svg viewBox="0 0 36 36" class="circle-svg">
   <path class="around" 
      stroke-dasharray="100, 100"
      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
</svg>

Je choisis ici la balise path car il va me permettre de créer facilement des cercles et des arcs-de-cercles. L’attribut « stroke-dasharray » définit le contours du cercle en plusieurs segments. Ici je souhaite avoir un trait continu. Je remplis donc la valeur maximale , (soit ici « 100, 100 »).

Notez également que « stroke-dasharray est une propriété CSS, qui aurait très bien pu être utilisé pour tracer le contours du cercle.

Ensuite je vais superposer un demi-cercle correspondant au pourcentage voulu :

<svg viewBox="0 0 36 36" class="circle-svg">
   <path class="around" 
      stroke-dasharray="100, 100"
      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
   <path class="percent" stroke-dasharray="30, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
   <text x="18" y="14" text-anchor="middle" dy="7" font-size="20">3/10</text>
</svg>

Ma seconde balise path est identique à la précédente, excepté la valeur stroke-dasharray, qui est à 30, 100. Ici nous dessinons un arc de cercle correspondant à 30% d’un cercle. Attention, cet attribut de la balise SVG n’a pas cette vocation initialement de contrôler un quelconque pourcentage.

.circle-svg {
  display: block;
  margin: 10px auto;
  max-height: 100px;
}
.circle-svg text {
  text-align:center;
  color:black;
  font-size:10px
}
.circle-svg path.percent {
  stroke: #6f6fff;
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}
.circle-svg path.around {
    stroke: #c4c4c4;
    fill: none;
    stroke-width: 2.8;
}

Enfin, je vais animer mon arc de cercle avec cette règle CSS :

@keyframes progress {
  0% {
    stroke-dasharray: 0 100; 
  }
}

retrouvez tous les outils et ressources en liens avec ce tuto ...

Technologies utilisées pour ce tuto :

CSS 3

HTML 5

SVG