css - SVG圆圈有间隙

Question

我正在尝试使用 SVG 和一些技巧来构建饼图。

.pie {
  border-radius: 50%;
  transform: rotate(-90deg);
}
.pie .background {
  fill: none;
  stroke: #eaeaea;
  stroke-width: 3;
  stroke-dasharray: 100 100;
}
.pie .chart {
  fill: none;
  stroke: #f73319;
  stroke-width: 3;
  stroke-dasharray: 0 100;
  animation: 2s linear slice;
  animation-fill-mode: forwards
}
@keyframes slice {
  to {
    stroke-dasharray: 75 100;
  }
}

<svg viewBox="0 0 64 64" class="pie">
  <circle class="background" r="25%" cx="50%" cy="50%"></circle>
  <circle class="chart" r="25%" cx="50%" cy="50%"></circle>
</svg>

JSFiddle .

代码非常简单:我正在使用 stroke-dasharray 来创建一个覆盖整个圆的破折号，并且可以调整为一个切片。然而，出于某种原因，没有一个浏览器“关闭”这个圈子。

如果要调整饼图%，可以更改第一个数字

stroke-dasharray: 75 100;

第二个数字指定不同破折号之间的间隔。它位于 100 的原因是因为它等于圆的半径，即:

  radius * width * 2 * pi
=   0.25 *    64 * 2 * pi
= 100.53

Answer 1

你的圆在 viewBox="0 0 64 64"中是 r="25%"这意味着它的半径为 16(64 的 25%)

圆的周长为 2 * PI * r，对于 r=16 为 100.53，即略大于 100，因此第一个 dasharray 值 100 不完整圆。只需将第一个值设置为 100.53，它就会一直绘制。

.pie{
            border-radius:50%;
            transform: rotate(-90deg);
        }
        .pie .background{
            fill:none;
            stroke:#eaeaea;
            stroke-width:3;
            stroke-dasharray:100.53 100;
           
        }
         .pie .chart{
            fill:none;
            stroke:#f73319;
            stroke-width:3;
            stroke-dasharray:0 100;
            animation: 2s linear slice ;
            animation-fill-mode:forwards
        }
        @keyframes slice{
            to{stroke-dasharray:100.53 100;}
        }

<svg viewBox="0 0 64 64" class="pie">
    <circle class="background" r="25%" cx="50%" cy="50%">

    </circle>
       <circle class="chart" r="16" cx="50%" cy="50%">

    </circle>
    
</svg>