简单的 svg css 进度圈

Question

我正在尝试寻找一种方法来实现没有动画的简单进度圈（静态）。我发现的示例具有非常不同的百分比偏移量，如下例所示。如何以这样的方式制作进度圈：如果我提供偏移量为 50%，那么它恰好是 50%（半填充）？

.u-absoluteCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.u-flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.u-offscreen {
  position: absolute;
  left: -999em;
}
.demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress {
  transform: rotate(-90deg);
}
.progress__value {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}
@-webkit-keyframes progress {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes progress {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="120" height="120" viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
    <circle cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12"
        stroke-dasharray="339.292" stroke-dashoffset="339.292" />
</svg>

Answer 1

您可以利用 SVG 属性来设置路径长度，而不必计算它。

pathLength将长度设置为您需要的任何长度...例如进度条为 100。

pathLength 属性允许作者以用户单位指定路径的总长度。然后，通过使用路径长度/（路径长度的计算值）比率缩放所有距离计算，该值用于校准浏览器的距离计算与作者的距离计算。

pathLength="100"

然后你stroke-dasharray也可以将其设置为100，然后stroke-dashoffset根据需要进行调整......

pathLength="100"

::root {
  --val: 0;
}

svg {
  transform: rotate(-90deg);
}

.percent {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--val));
}

.fifty {
  --val: 50;
}

.sixty {
  --val: 60;
}

.ninety {
  --val: 90;
}

Answer 2

正如保利所说，pathLength是进步的关键

现代 JavaScript Web 组件（所有现代浏览器都支持 JSWC）可实现可重用的 HTML 元素

 <svg-progress-circle percent="30"></svg-progress-circle>
 <svg-progress-circle percent="20" color="blue"></svg-progress-circle>
 <svg-progress-circle percent="80" color="gold"></svg-progress-circle>

添加了用于交互式演示目的的范围输入。

百分比是元素的一个属性，您可以使用如下代码进行设置：

    document.getElementById("Slider1").percent = <PERCENTAGE>;

如果您不需要灰色虚线全圆，请从pathLenght=120 path

我使用了 apath而不是重叠circles，因为通过其他一些设置，几乎相同的代码可以创建饼图。

<style>
  svg { width: 150px; background: teal }
  svg-progress-circle[percent="100"] path { stroke: green }
</style>

<svg-progress-circle percent="30"></svg-progress-circle>
<svg-progress-circle percent="20" color="blue"></svg-progress-circle>
<svg-progress-circle percent="80" color="gold"></svg-progress-circle>

<script>
  customElements.define("svg-progress-circle", class extends HTMLElement {
    connectedCallback() {
      let d = 'M5,30a25,25,0,1,1,50,0a25,25,0,1,1,-50,0'; // circle
      this.innerHTML = 
      `<input type="range" min="0" max="100" step="10" value="30"`+ // delete 2 lines
      ` oninput="this.parentNode.percent=this.value" /><br>`+ // just for demo
      
      `<svg viewBox="0 0 60 60">
       <path stroke-dasharray="10 2"   stroke-dashoffset="-19" 
             pathlength="120" d="${d}" fill="grey" stroke="lightgrey" stroke-width="5"/>
       <path stroke-dasharray="30 70" stroke-dashoffset="-25" 
             pathlength="100" d="${d}" fill="none" 
             stroke="${this.getAttribute("color")||"red"}" stroke-width="5"/>
       <text x="50%" y="57%" text-anchor="middle">30%</text></svg>`;
       
      this.style.display='inline-block';
      this.percent = this.getAttribute("percent");
    }
    set percent(val = 0) {
      this.setAttribute("percent", val);
      let dash = val + " " + (100 - val);
      this.querySelector("path+path").setAttribute('stroke-dasharray', dash);
      this.querySelector("text").innerHTML = val + "%";
      this.querySelector("input").value = val;
    }
  })
</script>

注意：我正在开发一个完整的 Web 组件，它可以执行饼图和精美的进度圈，例如：

但是，它只是众多副项目之一... HTML 示例和混淆的源代码可在https://pie-meister.github.io/上找到