svg饼图里面有百分比

Question

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以考虑text元素并调整其位置：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;