Html 调整'；s使用SVG圆，同时保持分段的比例

我将详细介绍如何使用SVG圆圈和笔划创建圆环图

但是，我正在努力解决如何将最终对象调整为我喜欢的任何大小，例如，我希望圆环图完全缩放到svg元素设置为的任何大小（在本例中为500x500）

我的目标是从500x500油炸圈饼图开始，然后调整大小（基于css类的存在）到50x50

这是基本代码（但请参阅JSFIDLE了解全部内容）

10
啤酒

---

这很简单。只需在CSS类中为您的

定义不同的大小

<div class="donut-chart">
</div>

<div class="donut-chart small">
</div>


.donut-chart {
  width: 500px;
}

.donut-chart.small {
  width: 100px;
}

10
啤酒
10
啤酒

在您的示例中，svg的大小为500x500，但圆圈/甜甜圈较小，为378.49x378.49。svg元素和circle元素之间似乎有一些“填充”，这是因为您的

viewBox

的宽度和高度为42，但您的圆小于42（r=15）。如果要减少填充，请调整视图框。谢谢。这是我不理解的viewbox。网络上有很多很好的文章解释了viewbox，在评论中总结起来有点复杂。但基本上，它描述了希望在视口中可见的SVG区域（由

宽度
和
高度
描述的区域）。如果
viewBox
比形状的边界宽或高，则该额外空间在视口区域中可见。你就是这样。如果要丢失额外的空间，请将图形圆变大，或使viewBox尺寸更贴近圆。例如：
viewBox=“3.5 3.5 35”
谢谢。我读了很多viewBox，有点太多了。对于我来说，帮助我的是将svg元素视为整个电影场景，将viewBox高度和宽度（最后两个数字）视为摄影机缩放级别控制。如果我想让圆圈填满整个屏幕，那么我应该放大圆圈的大小。这对我很有帮助，但我确信viewBox还有更多功能。
<div class="donut-chart">
</div>

<div class="donut-chart small">
</div>


.donut-chart {
  width: 500px;
}

.donut-chart.small {
  width: 100px;
}