Javascript svg渐变填充动画百分比jquery

我试图用jquery获得一些svg动画，对于每个类“检查”，我需要求和渐变的百分比偏移量，当这个类被删除时，需要减少百分比偏移梯度。这一切都需要动画向下时，类添加，并向上向下时，类删除

所以我得到梯度，得到偏移量为5%的百分比。试图获取阵列，但被卡住了。考虑使用类“check”获取所有元素，并尝试对每个类求和

var firstStop=document.getElementById（'F1gst1'）；
百分比='5%'；setAttribute（'offset'，百分比）；
$（“.analysis li”）。单击（函数（）{
$（this.toggleClass（“检查”）；
if（$（this）.hasClass（'check'））{
}
});








我就是这样做的。为了给渐变设置动画，我使用了
requestAnimationFrame
。我正在设置10%和100%之间的第二个停止偏移的动画，但您可以选择所需的值

请阅读代码中的注释


//第二站
让laststop=document.getElementById（'F1gst2'）；
//用于切换动画的变量
设n=0；
//偏移属性的目标值
让目标；
//偏移属性的实际值
设val=10；
//请求动画帧id
设rid=null；
$（“.analysis li”）。单击（函数（）{
n++；
//设置目标值
如果（n%2==1）{
目标=100；
}else{target=10}
//如果有动画，请停止它
if（rid）{cancelAnimationFrame（rid）；rid=“null”}
//调用frame函数
框架（）
});
函数框架（）{
rid=请求动画帧（帧）；
//值与目标值之间的距离
dist=target-val；
//增加价值
val+=dist/10；
//设置偏移值
setAttributeNS（null，“offset”，`${val}%`）
}
svg{边框：1px实心；宽度：30px}
路径{stroke:black；}

单击此处

SVG以编程方式创建，传入值仅转换一个形状：


let path=（y，d，extra）=>``
让multi=（count，html）=>Array（count）.fill（0）.map（（e，i）=>html（i））.join（“”）；
让toggle=el=>el.classList.toggle（'on'）|
rect.setAttribute（'y'，14.6*（7-document.queryselectoral（“path.on”）.length）+8）
scale.innerHTML=multi（10，i=>path（i*10，'M60,10h10M65,12h5M65,14h5M65,16h5M65,18h5'）；
checks.innerHTML=multi（7，i=>path（i*12，'M10,10v8h8v-8z'，'class=“on”onclick=“toggle（this）”）+
路径（i*12，'M12,14l2.2,2l2.2，-4'））
g#缩放路径{
笔画：白色；
笔划宽度：0.7；
}
#支票{
位置：绝对位置；
顶部：20px；
左：20px；
}
#检查路径{
填充：无；
指针事件：全部；
行程：#f5b53a；
光标：指针；
笔划线条连接：圆形；
}
#检查path.on+path{
不透明度：1；
}
#检查路径：第n个子（2n）{
不透明度：0；
指针事件：无；
过渡：0.5s；
笔画：白色；
}