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
Author: Renjith P.N., 2018-05-20
1 answers
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>
1
Author: Temani Afif, 2018-05-21 00:19:41