Javascript 包含百分比的svg饼图

是否可以使用SVG创建饼图，并在圆内显示百分比

我知道我们可以像下面这样使用SVG创建饼图，但不确定如何定位或显示百分比文本。请帮忙

svg{
宽度：200px；
边界半径：50%；
背景#3f51b5；
变换：旋转（-90度）；
}
圈{
填充：无；
笔画宽度：32；
r:16；
cx:16；
cy:16；
}
第一圈{
行程：#00bcd4；
}
勒秒{
行程：#ffeb3b；
}
第三圈{
笔画：紫色；
}

<代码> > p>您可以考虑<代码>文本< /代码>元素并调整它们的位置：


svg{
宽度：200px；
边界半径：50%；
背景#3f51b5；
变换：旋转（-90度）；
}
svg文本{
变换：旋转（90度）；
字号：5px；
}
圈{
填充：无；
笔画宽度：32；
r:16；
cx:16；
cy:16；
}
第一圈{
行程：#00bcd4；
}
第二圈{
行程：#ffeb3b；
}
第三圈{
笔画：紫色；
}

65%
5%
35%
更好地使用库，如
d3
或
highCharts
我不想为此使用大型库，因为我的要求只是显示此图，而且我能够如上所述创建饼图，但不确定如何显示百分比文本。