Можно ли создать круговую диаграмму, используя SVG, с процентами, отображаемыми внутри кружков.
Я знаю, что мы можем создавать круговые диаграммы, используя SVG, как показано ниже, но не уверен, как расположить или отобразить процентный текст,Пожалуйста, помогите.
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>