创建具有两个百分比的响应式圆形百分比图表答案

【问题标题】：Creating a responsive circular percentage chart with two percentages创建具有两个百分比的响应式圆形百分比图表
【发布时间】：2021-08-04 09:21:07
【问题描述】：

我正在尝试用任意两个百分比值构建一个如下所示的圆圈。

目前我有下面的圆圈，但我不确定如何解决这些差距，因为我目前的方法是创建一个完整的圆圈，然后在其顶部添加一条路径。

我圈子的代码是：

 <svg viewBox="0 0 36 36" className="circular-chart orange">
        <path
          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"
          fill="none"
          strokeDashoffset="1"
          strokeDasharray="1000"
          strokeWidth="1.5"
          stroke="blue"
        />
        <path
          strokeDasharray="69, 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"
          fill="none"
          strokeWidth="1.5"
          stroke="red"
        />
      </svg>

【问题讨论】：

仅 CSS：stackoverflow.com/a/57492058/8620333
太棒了。关于如何控制镶嵌边框大小的任何想法？
参考我在此处链接的其他答案以了解剪辑路径的工作原理

标签： javascript css svg

【解决方案1】：

添加一个 100 的 pathLength，使整个圆等于 100 个单位，然后根据需要调整您的 stroke-dasharrays。

 <svg width="400px" height="400px" viewBox="0 0 36 36" className="circular-chart orange">
    <path
      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"
      fill="none"
      stroke-dasharray="0 69 30.75 0.25"
      stroke-width="1.5"
      stroke="blue"
      pathLength="100"
    />
    <path
      stroke-dasharray="68.75, 31.25"
      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"
      fill="none"
      stroke-width="1.5"
      stroke-dasharray="61 39"
      stroke="red"
      pathLength="100"
    />
  </svg>

【讨论】：

【解决方案2】：

也许这就是你要找的东西：

<svg viewBox="0 0 36 36" className="circular-chart orange">
<path d="M 33.915493,18 C 33.915493,26.789888 26.789894,33.9155 18,33.9155 9.2101061,33.9155 2.0845069,26.789888 2.0845069,18 2.0845069,9.2101123 9.2101061,2.0845 18,2.0845 26.789894,2.0845 33.915493,9.2101123 33.915493,18 Z" style="fill:none;stroke:#0000ff; stroke-width:1.5px;strokeDashoffset:1;strokeDasharray:1000"/>
<path d="M 10.760589,3.8225001 C 12.932326,2.7113308 15.39296,2.0845 18,2.0845 c 8.789894,0 15.915493,7.1256123 15.915493,15.9155 0,8.789888 -7.125599,15.9155 -15.915493,15.9155 -5.153422,0 -9.7347676,-2.449325 -12.643428,-6.24736" style="fill:none;stroke:#ff7700; stroke-width:1.5px;strokeDashoffset:1;strokeDasharray:69, 100"/>
</svg>

【讨论】：