SVG圈有空隙 [英] SVG circle has a gap

问题描述

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

I am trying to build a pie chart using SVG and some trickery.

.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来形成一个覆盖整个圆的破折号，并且可以对其进行调整以形成一个切片.但是，由于某种原因，没有一个浏览器会关闭"圈子.

The code is quite simple: I am using stroke-dasharray to have a dash that covers the whole circle and can be adjusted to make a slice. However, for some reason none of the browsers "close" the circle.

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

If you want to adjust the pie chart %, you can change the first number in

stroke-dasharray: 75 100;

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

The second number specifies the gap between different dashes. The reason it is at 100 is because it is equal to the radius of the circle which is:

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

推荐答案

您的圆在viewBox ="0 0 64 64"中为r ="25％"，表示半径为16(64％的25％)

Your circle is r="25%" in a viewBox="0 0 64 64" that means it has a radius of 16 (25% of 64)

圆的周长为2 * PI * r，对于r = 16，它的值为100.53，即略大于100，因此第一个破折号值100不会使圆完整.只要将第一个值设为100.53，它就会一直绘制.

The circumference of a circle is 2 * PI * r which for r=16 is 100.53 i.e. slightly larger than 100 so the first dasharray value of 100 does not complete the circle. Just make the first value 100.53 and it will draw all the way round.

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

这篇关于SVG圈有空隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！