Alignment of textPath in SVG for a pie graph

Question

I am trying to make a pie chart using SVG. The chart comes out fine but I am not able to add a text(values in pie) to it. Tried using textpath but the aligment is an issue. I do not want to use a library because my use case has several of these simple pie on a single screen.

Please find the svg

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <g transform="rotate(-90 50 50)"><path d="M 50,50 l 49,0 a49,49 0 0,0 -18.010176595826515,-37.95564312955508 z" fill="#c3fcb4" id="textPath0"></path><path d="M 50,50 l 30.989823404173485,-37.95564312955508 a49,49 0 1,0 18.010176595826515,37.95564312955509 z" fill="#ffb7b3" id="textPath1"></path></g><text><textPath href="#textPath0">11</textPath></text><text><textPath href="#textPath1">67</textPath></text></svg>

Answer 1

I have improved your code and make it a little bit easier so that you can add more percentage ratio to Svg pie chart

 svg { width: 200px; border-radius: 50%; background: #c3fcb4; 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: #ffb7b3; } le.second { stroke: #ffeb3b; } circle.third { stroke: purple; }

 <svg viewBox="0 0 32 32"> <circle class='second' stroke-dasharray="36 100"></circle> <circle class='first' stroke-dasharray="86 100"></circle> <text x="10" y="-24" fill="#000">11</text> <text x="5" y="-11" fill="#000">67</text> </svg>