SVG 中 textPath 的 Alignment 用于饼图

Question

我正在尝试使用 SVG 制作饼图。 图表很好，但我无法向它添加文本（饼图中的值）。 尝试使用 textpath 但对齐是一个问题。 我不想使用库，因为我的用例在一个屏幕上有几个这样的简单饼图。

请找到 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

我已经改进了您的代码并使其更容易一些，以便您可以向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>