Javascript 为svg填充设置平滑动画

我有一个SVG温度计，我正试图为每节课设置一个平滑填充的动画

我用开关类做了温度计。我正在尝试为我的每一堂课制作流畅的上下动画和上下动画

-温度计

var firstStop=document.getElementById（'F1gst1'）；
百分比='0%'；
setAttribute（'offset'，百分比）；
var countallcheckbox=$（'.analysis li'）.length；
var CountChecked=0；
$（“.analysis li”）。单击（函数（）{
$（this.toggleClass（“检查”）；
CountChecked=$（'.analysis li.check'）。长度；
百分比=（（CountChecked/countallcheckbox）*100）+'%；
setAttribute（'offset'，百分比）；
});
一种解决方案是只使用javascript而不是使用css和/或svg道具来制作动画。例如：

function anim(fromPercentage) {
   var topLimit = 25;  
   fromPercentage += 1;
   if(fromPercentage < topLimit) {
      $('#F1gst1').attr('offset', fromPercentage + '%');
      setTimeout( function() {
         anim(fromPercentage);
      }, 35);
   }
};

/*
* Animates the bar from 10 to 25 percentage.
* Change the topLimit inside the anim-function to the current desired top level.
* Also tweek the timeout to get smoother transition.
*/
anim(10);

函数动画（从百分比）{
var topLimit=25；
从百分比+=1；
如果（从百分比<上限）{
$（'F1gst1'）.attr（'offset'，fromPercentage+'%'）；
setTimeout（函数（）{
动画（百分比）；
}, 35);
}
};
/*
*将条形图的动画设置为从10%到25%。
*将动画功能内的topLimit更改为当前所需的顶级。
*另外，也要缩短超时时间以获得更平滑的过渡。
*/
动漫（10）；

@但是我需要这个（（CountChecked/countallcheckbox）*100）+'%。它将是如此多的面具和功能

这是一个掩码和一个函数，这里是一个快速片段：


const scale=Array.from（Array（101），（u，i，a）=>90*（100-i）/100）；
document.querySelector（“svg#scale”）.setAttributeNS（null，“d”，scale.filter（（v，i）=>i&&i`M20，${v}，25，${v}`）。join（“”）；
setInterval（函数（）{
让百分比=数学地板（数学随机（）*100）；
document.querySelector（“div”）.textContent=百分比+“%”；
document.querySelector（“svg#red”）.style.setProperty（“transform”，translateY（${scale[percent]}px）`）
}, 1000);
svg{
最大宽度：100px；
最大高度：200px；
}
svg#红色{
转换：转换300ms；
}
使用
，而不是改变线性梯度。将
与上下移动的
一起使用。结果是，交点可见。您可以
transition
使用
y
属性或
transform:translateX（…）
@Thomas，但我需要（（CountChecked/countallcheckbox）*100）+'%。它将是如此多的面具和功能。
<linearGradient y2="0%" x2="0%" y1="100%" x1="0%" id="F1g">
  <stop stop-color="#00FF00" offset="0%" id="F1gst1">
    <animate id="g0" attributeName="offset" to="5%" dur="0.5s" begin="indefinite" />
     <animate id="g1" attributeName="offset" to="19.285714285714285%" dur="0.5s" begin="indefinite" />
      <animate id="g2" attributeName="offset" to="33.57142857142857%" dur="0.5s" begin="indefinite" />
       <animate id="g3" attributeName="offset" to="47.857142857142854%" dur="0.5s" begin="indefinite" />
        <animate id="g4" attributeName="offset" to="62.14285714285714%" dur="0.5s" begin="indefinite" />
         <animate id="g5" attributeName="offset" to="76.42857142857143%" dur="0.5s" begin="indefinite" />
         <animate id="g6" attributeName="offset" to="90.71428571428571%" dur="0.5s" begin="indefinite" />
         <animate id="g7" attributeName="offset" to="105%" dur="0.5s" begin="indefinite" />
          </stop>
<stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>
<path fill="url(#F1g)" class="st0" d="M30.5 297.5V4.6c0-2.5-2.1-4.6-4.6-4.6-2.5 0-4.6 2.1-4.6 4.6v292.9c-7.9 2-13.8 9.2-13.8 17.8 0 10.2 8.2 18.4 18.4 18.4s18.4-8.2 18.4-18.4c0-8.5-5.9-15.7-13.8-17.8"/><path fill="url(#F1g)" class="st0" d="M9 290.2h7.5v.5H9zM9 284.3h7.5v.6H9zM9 278.4h7.5v.5H9zM9 272.5h7.5v.6H9zM0 266.6h16.5v.6H0zM9 260.7h7.5v.5H9zM9 254.8h7.5v.6H9zM9 248.9h7.5v.5H9zM9 243h7.5v.6H9zM0 237.1h16.5v.6H0zM9 231.3h7.5v.5H9zM9 225.4h7.5v.6H9zM9 219.5h7.5v.6H9zM9 213.6h7.5v.6H9zM0 207.7h16.5v.6H0zM9 201.8h7.5v.6H9zM9 195.9h7.5v.6H9zM9 190h7.5v.6H9zM9 184.1h7.5v.5H9zM0 178.2h16.5v.6H0zM9 172.3h7.5v.6H9zM9 166.4h7.5v.5H9zM9 160.5h7.5v.6H9zM9 154.7h7.5v.6H9zM0 148.8h16.5v.6H0zM9 142.9h7.5v.6H9zM9 137h7.5v.5H9zM9 131.1h7.5v.5H9zM9 125.2h7.5v.6H9zM0 119.3h16.5v.5H0zM9 113.4h7.5v.6H9zM9 107.5h7.5v.6H9zM9 101.6h7.5v.5H9zM9 95.7h7.5v.6H9zM0 89.8h16.5v.6H0zM9 83.9h7.5v.6H9zM9 78.1h7.5v.6H9zM9 72.2h7.5v.6H9zM9 66.3h7.5v.6H9zM0 60.4h16.5v.6H0zM9 54.8h7.5v.6H9zM9 48.9h7.5v.6H9zM9 43h7.5v.5H9zM9 37.1h7.5v.6H9zM0 31.2h16.5v.5H0zM9 26h7.5v.6H9zM9 20.1h7.5v.5H9zM9 14.2h7.5v.6H9zM9 8.3h7.5v.6H9zM0 2.4h16.5V3H0z"/></svg>

var firstStop = document.getElementById('F1gst1');
percentage = '5%'; firstStop.setAttribute('offset',percentage);
var CountAllCheckboxes = $('.analysis-li').length;
var CountChecked = 0;

$(".analysis-li").click(function(){
$(this).toggleClass("check");

CountChecked = $('.analysis-li.check').length;
percentage = ((CountChecked / CountAllCheckboxes) * 100 + 5)+'%';
$('#g'+CountChecked)[0].beginElement();
setTimeout("firstStop.setAttribute('offset',percentage)", 450);
});