Javascript svg上的Progressbar.js边框半径

progressbarjs是否可以有一个填充50%的边界半径，就像父divs边界半径一样

HTML

<div class="pgbar" id="pgbar"></div>

JS

var bar = new ProgressBar.Line(pgbar, {
    color: '#00AFD0',
    trailWidth: 1,
    svgStyle: {borderRadius: '23px'}
});

bar.animate(0.5);

---

边框半径

在加载SVG的前缘/右缘不起作用，因为SVG的宽度为100%，因此边框半径实际上位于SVG的最左/最右边缘，因此如果路径的宽度不是100%，则不会剪裁路径

要解决此问题，您可以使用

笔划linecap:round

的组合来环绕

元素笔划的边缘，并以编程方式设置进度元素的笔划宽度，因此，您需要根据DOM元素的纵横比缩放画布，以实现圆形

var-width=pgbar.clientWidth；
变量高度=pgbar.clientHeight；
var bar=新进度条线（pgbar{
颜色：“#00AFD0”，
冲程宽度：高度/宽度*100，
svgStyle：{
strokeLinecap：“圆形”
}
});
动画条（0.5）
.pgbar{
高度：46px；
保证金：0自动30px；
背景色：#D8D8D8；
边界半径：23px；
填充：2px；
}
.pgbar svg{
身高：100%；
宽度：100%；
边界半径：23px；
}


var bar = new ProgressBar.Line(pgbar, {
    color: '#00AFD0',
    trailWidth: 1,
    svgStyle: {borderRadius: '23px'}
});

bar.animate(0.5);