使用 svg 的饼图并做出反应

Question

我使用本教程https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/中的 svg 模式在 React 中创建了一个饼图

我有四件

对于所有四件： stroke-dasharray: 25, 100;

对于每一件我还有： stroke-dashoffset: 0;, stroke-dashoffset: -25;, stroke-dashoffset: -50; 和 stroke-dashoffset: -75;

问题是我在第一块和最后一块之间有一个间隙，所以这些块没有完全填满圆圈。

Answer 1

通过查看这个类似的帖子SVG circle has a gap，我设法找出了答案

原来我的半径为 16，整个圆超过 100%。设置 stroke-dasharray: 100,53 并将我的半径除以 1.0053 会有所帮助。