Javascript 使用笔划dasharray和活动颜色填充分割半圆

我正在使用SVG仪表，当范围滑块在使用渐变颜色的活动笔划填充上移动时，我想将半圆分成几个部分。并希望在仪表指针移动时再添加一条黑色跑步轨迹。我曾尝试使用

stroke dasharray

，但添加此选项后，所有颜色都会出现在计时器上，无法正常工作

当范围滑块在使用渐变颜色的活动笔划填充上移动时，我想将半圆分成几个部分

当指针移动时，我想再添加一个黑色的跑步轨迹

我的代码在这里

/*设置所有圆的半径*/
var r=400；
var circles=document.querySelectorAll（'.circle'）；
var total_circles=circles.length；
对于（var i=0；i<总圈数；i++）{
圆[i].setAttribute（'r'，r）；
}
/*设置仪表的包装尺寸*/
var仪表_尺寸=（r*2）+100；
var wrapper=document.querySelector（“#wrapper”）；
wrapper.style.width=米_尺寸+px；
wrapper.style.height=米_尺寸+px；
/*为圆添加笔划*/
var cf=2*Math.PI*r；
var semi_cf=cf/2；
var semi_cf_1by3=semi_cf/3；
风险值semi_cf_2by3=semi_cf_1by3*2；
document.querySelector（'#outline_curves'）.setAttribute（'stroke-dasharray'，semi#cf+'，'+cf）；
document.querySelector（'#high'）.setAttribute（'stroke-dasharray'，semi#cf+'，'+cf）；
document.querySelector（“#avg”）.setAttribute（'stroke-dasharray'，semi_cf_2by3+”，“+cf）；
document.querySelector（'low'）.setAttribute（'stroke-dasharray'，semi_cf_1by3+'，'+cf）；
document.querySelector（'#outline_ends'）.setAttribute（'stroke-dasharray'，2+'，'+（semi#cf-2））；
document.querySelector（'#mask'）.setAttribute（'stroke-dasharray'，semi#cf+'，'+cf）；
/*绑定范围滑块事件*/
var slider=document.querySelector（“#slider”）；
var lbl=document.querySelector（“#lbl”）；
var mask=document.querySelector（“#mask”）；
var meter_pine=document.querySelector（“#meter_pine”）；
功能范围\更改\事件（）{
变量百分比=滑块值
var仪表值=semi_cf-（（百分比*semi_cf）/100）；
mask.setAttribute（'stroke-dasharray'，meter_value+'，'+cf）；
meter_pine.style.transform='旋转（+（450-（（百分比*180）/100））+'度'；
lbl.textContent=百分比+'%'；
}
slider.addEventListener（'input'，range\u change\u事件）
#包装器{
位置：相对位置；
保证金：自动；
}
#仪表{
宽度：100%；
身高：100%；
变换：旋转（180度）；
}
.圆圈{
填充：无；
}
.大纲，
#面具{
行程：#f1f1；
笔画宽度：65；
}
.射程{
笔画宽度：60；
}
#滑块，
#lbl{
位置：绝对位置；
}
#滑块{
位置：绝对位置；
变换：旋转（180度）；
光标：指针；
左：0；
保证金：自动；
右：0；
最高：58%；
宽度：94%；
}
#lbl{
背景色：#4B4C51；
边界半径：2px；
颜色：白色；
字体系列：“courier new”；
字体大小：15磅；
字体大小：粗体；
填充：4px4px2px4px；
右：-48px；
最高：57%；
}
#仪表针{
身高：40%；
左：0；
保证金：自动；
位置：绝对位置；
右：0；
排名前10%；
变换原点：底部中心；
/*定向固定*/
变换：旋转（450度）；
宽度：5px；
背景色：红色；
}

0%
我的方法是纯CSS方法，我没有使用SVG，在这种情况下实现JS代码要容易得多

输出

var black=document.getElementsByClassName（'black'）[0]；
var gradient=document.getElementsByClassName（'gradient'）[0]
var tick=document.getElementsByClassName（'tick'）[0]；
var m=document.getElementById（'m'）；
m、 addEventListener（'输入'，函数（））{
black.style.transform=gradient.style.transform=tick.style.transform=“平移（-50%，-50%）旋转（-180/100）*m.value+“度）”
});
*{
边际：0px；
填充：0px；
字体系列：“arial”；
}
.gauge_main，
白色
黑色
打上钩
坡度
室
.米{
位置：绝对位置；
最高：50%；
左：50%；
高度：280px；
宽度：280px；
转换：翻译（-50%，-50%）；
过渡：0.4s；
}
.米{
背景色：白色；
高度：281px；
宽度：281px；
边界半径：50%；
剪辑路径：多边形（0 50%，100%50%，100%100%，0 100%）；
z指数：1000；
}
打上钩
.会议厅{
宽度：160px；
高度：5px；
背景：线性渐变（向右，白色50%，黑色50%）；
z指数：110；
变换原点：50%；
}
.滴答声{
z指数：1001；
}
.会议厅{
左：50%；
背景：白色；
宽度：280px；
高度：5px；
变换原点：50%；
转换：转换（-50%，-50%）旋转（计算（var（-i）*-20度））；
z指数：20；
}
白色
黑色
.梯度{
位置：绝对位置；
背景色：黑色；
边界半径：50%；
}
怀特先生{
高度：180像素；
宽度：180px；
背景色：白色；
z指数：30；
}
.梯度{
高度：280px；
宽度：280px；
背景：线性梯度（0度，rgba（292162551）0%，rgba（4106255，1）50%，rgba（208，212，255，1）50%）；
}
布莱克先生{
高度：200px；
宽度：200px；
背景：线性梯度（顶部，黑色50%，rgba（208，212，255，1）50%）；
盒影：0px 0px 0px 5px白色；
z指数：25；
}
@关键帧加载{
从{
变换：平移（-50%，-50%）旋转（0度）；
}
到{
变换：平移（-50%，-50%）旋转（-180度）；
}
}
输入{
位置：绝对位置；
最高：50%；
左：50%；
宽度：280px；
转换：翻译（-50%，50%）；
}
这里是一个SVG示例，带有一点javascript

你的问题不清楚你到底想要什么颜色的分割
看起来像。现在我只是把它们做成纯红的。但是您可以通过更改
的
填充
，使它们看起来像您想要的那样


let METER\u DIVISIONS=