Html 简单svg css进度循环

我试图寻找一种方法来实现一个简单的进程循环（静态）没有动画。我发现的示例中，百分比的偏移量非常不同，如下面的示例中所示。我如何使我的进度循环如此，如果我提供50%的补偿，那么它正好是50%（半填充）

.u-absoluteCenter{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
}
u-flexCenter{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.u-屏幕外{
位置：绝对位置；
左：-999em；
}
.演示{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.进展{
变换：旋转（-90度）；
}
.进度值{
笔划数组：0；
笔划偏移：0；
}
@-webkit为进度设置关键帧{
从{
行程偏移：339.292；
}
到{
笔划偏移：0；
}
}
@关键帧进度{
从{
行程偏移：339.292；
}
到{
笔划偏移：0；
}
}

---

您可以利用SVG属性设置路径长度，而无需计算路径长度

将长度设置为所需的长度…例如进度条为100

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

然后，您还可以将

笔划dasharray

设置为100，然后根据需要调整

笔划dashoffset

：：root{
--val:0；
}
svg{
变换：旋转（-90度）；
}
{
行程：100；
行程偏移量：计算值（100-var（--val））；
}
.50{
--val:50；
}
.六十{
--val:60；
}
九十{
--val:90；
}

---

正如保利所说，

路径长度

是进步的关键

一个现代的自定义元素（在所有现代浏览器中都支持）构成了一个可重用的HTML元素

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

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

document.getElementById（“Slider1”）.percent=；

如果不需要灰色虚线整圆，请从

pathLenght=120

path

我使用了

路径

而不是重叠的

圆

，因为在其他一些设置中，几乎相同的代码可以创建饼图

svg{宽度：150px；背景：teal}
svg进度圈[percent=“100”]路径{stroke:green}
define（“svg进程圈”，类扩展了HtmleElement{
connectedCallback（）{
设d='M5,30a25,25,0,1,1,50,0a25,25,0,1,1，-50,0'；//圈
this.innerHTML=
`
`+//仅用于演示
`
30%`;
this.style.display='inline-block'；
this.percent=this.getAttribute（“percent”）；
}
设置百分比（val=0）{
此.setAttribute（“百分比”，val）；
设dash=val++（100-val）；
这个.querySelector（“路径+路径”）.setAttribute（'stroke-dasharray'，dash）；
this.querySelector（“text”）.innerHTML=val+“%”；
此.querySelector（“输入”）.value=val；
}
})

对于25%尝试

stroke dasharray=“84.823 254.469”

其中，笔划84.823表示路径长度的25%（339.292），间隙（254.469）表示75%。但这只给出了3个值（50、60、90），我认为OP需要0-100之间的任何值。这是否适用？这些值仅用于演示目的。调整这个值很简单——好吧。您能解释一下如何从HTML代码中提供值吗？大约26%

pathLength="100"