簡單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/（路徑長度的計算值）縮放所有距離計算。

pathLength="100"

然后您也可以將stroke-dasharray設置為 100，然后根據需要調整stroke-dashoffset ....

 ::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; }

 <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 class="percent fifty" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" /> </svg> <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 class="percent sixty" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" /> </svg> <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 class="percent ninety" cx="60" cy="60" r="54" fill="none" stroke="#f77a52" stroke-width="12" pathLength="100" /> </svg>

Answer 2

正如保利所說， pathLength是進步圈子的關鍵

現代自定義元素（在所有現代瀏覽器中都支持）使得可重復使用的 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中刪除虛線設置

我使用path而不是重疊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/ 獲得