Question

我正在尝试构建一个圆形百分比图，如下所示：

此刻，我有这个：https://jsfiddle.net/pvtxgq21/1/

HTML：

<svg viewBox="0 0 36 36" class="circular-chart">
  <path
    class="circle-outer"
    d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
  />
  <path
    class="circle"
    stroke-dasharray="50, 100"
    d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
  />
</svg>

CSS：

body {
  background-color: #000;
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 256px;
}

.circle-outer {
  fill: none;
  stroke: #3c3c3c;
  stroke-width: 1;
}

.circle {
  fill: none;
  stroke: #17E68F;
  stroke-width: 3;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.percentage {
  fill: #666;
  font-size: 0.5em;
  text-anchor: middle;
}

我无法找到一种方法来“绘制”另一个内部的彩色圆圈，如上图所示。我不太精通SVG。有一个简单的解决方案吗？我使用了一些SVG属性？

谢谢。

Answer 1

您需要重写第二条路径，以使圆的半径缩小2个单位（stroke-width =“ 3”-stroke-width =“ 1”）
现在的问题是动画路径的长度较小，因此您也需要更改动画

body {
      background-color: #000;
    }
    
    .circular-chart {
      display: block;
      margin: 10px auto;
      max-width: 256px;
    }
    
    .circle-outer {
      fill: none;
      stroke: #3c3c3c;
      stroke-width: 1;
    }
    
    .circle {
      fill: none;
      stroke: #17E68F;
      stroke-width: 3;
      stroke-dasharray: 0 93.73;
      animation: progress 1s ease-out forwards;
    }
    
    @keyframes progress {
      100% {
        stroke-dasharray: 46.86;
      }
    }
    
    .percentage {
      fill: #666;
      font-size: 0.5em;
      text-anchor: middle;
    }

<svg viewBox="0 0 36 36" class="circular-chart">
      <path
        class="circle-outer"
        d="M18 2.0845
            a 15.9155 15.9155 0 0 1 0 31.831
            a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path
        class="circle"
        d="M18 3.0845
            a 13.9155 13.9155 0 0 1 0 29.831
            a 13.9155 13.9155 0 0 1 0 -29.831"
      />
    </svg>

Answer 2

<svg viewBox="0 0 36 36" class="circular-chart">
<path
class="circle-outer"
d="M18 2.0845
    a 15.9155 15.9155 0 0 1 0 31.831
    a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path
class="circle"
stroke-dasharray="70, 100"
d="M18 2.8
    a 15 15 0 0 1 0 30
    a 15 15 0 0 1 0 -30"
/>
</svg>

你好在<svg>中使用上面的代码。希望它能解决您的问题。

带有内部行程的圆形进度条

2 个答案: