gráfico circular svg com percentagens dentro

Question

gráfico circular svg com percentagens dentro

é possível criar um gráfico circular com SVG com a percentagem apresentada dentro dos círculos.

Eu sei que podemos criar gráficos circulares usando SVG como em baixo, mas não sei como posicionar ou mostrar o texto percentual. Ajudar.

svg {
  width: 200px;
  border-radius: 50%;
  background: #3f51b5; 
  transform: rotate(-90deg);
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: #00bcd4;
 
}
 le.second {
  stroke: #ffeb3b;
}
  
circle.third {
  stroke: purple;
}

<svg viewBox="0 0 32 32">
  <circle class='first' stroke-dasharray="34 100"></circle>
  <circle class='second' stroke-dasharray="36 100"></circle>
  <circle class='third' stroke-dasharray="3 100"></circle>
</svg>

0

css javascript css3 svg

Author: Renjith P.N., 2018-05-20

Source

1 answers

score 1 · Accepted Answer

Pode considerar text o elemento e ajustar a sua posição:

svg {
  width: 200px;
  border-radius: 50%;
  background: #3f51b5; 
  transform: rotate(-90deg);
}
svg text {
  transform: rotate(90deg);
  font-size:5px;
}
 
circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}
 
circle.first {
  stroke: #00bcd4;
 
}
 le.second {
  stroke: #ffeb3b;
}
  
circle.third {
  stroke: purple;
}

<svg viewBox="0 0 32 32">
  <circle class='first' stroke-dasharray="34 100"></circle>
  <circle class='second' stroke-dasharray="36 100"></circle>
  <circle class='third' stroke-dasharray="3 100"></circle>
  <text x="5" y="-11" fill="#fff">65%</text>
  <text x="15" y="-26" fill="#fff">5%</text>
  <text x="18" y="-17" fill="#fff">35%</text>
</svg>