带内笔画的圆形进度条答案

【问题标题】：Circular progress bar with inner stroke带内笔画的圆形进度条
【发布时间】：2020-06-19 10:53:01
【问题描述】：

我正在尝试构建一个像这样的圆形百分比图表：

目前，我有这个：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 属性？

谢谢。

【问题讨论】：

不明白你需要什么。您的图像和示例是相同的。
略有不同。在图像中，绿色圆圈在灰色内部（我试图实现的解决方案）。在示例中，绿色圆圈以灰色圆圈为中心。
你需要调整viewbox。（添加溢出：对 SVG 可见以查看问题）
讨厌的小问题（总是）。 SVG 将笔画 50% 置于填充之外，50% 置于填充之上。我没有解决方案，但这是您需要在 Google 上搜索“SVG 笔划位置外部”的内容。
建议：将 SVG 放在 <div> 中，并使用 .circular-chart { width: 100% } 而不是 .circular-chart { max-width: 256px } 并调整 <div> 的大小或最大化，这样响应式设计将变得更容易。跨度>

标签： html css svg

【解决方案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>

【讨论】：

这正是我正在寻找的行为。谢谢！

【解决方案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> 中使用上述代码。希望它能解决您的问题。

【讨论】：