svg 填充的平滑动画

Question

我有一个 SVG 温度计，我正在尝试为每个 class 制作平滑填充它的动画。

我用开关 classes 做了温度计。我正在尝试为我拥有的每个 class 制作流畅的上下动画和上下动画。

var firstStop = document.getElementById('F1gst1');
percentage = '0%';
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) + '%';
  firstStop.setAttribute('offset', percentage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<svg class="thermometr" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.3 333.8">
  <linearGradient y2="0%" x2="0%" y1="100%" x1="0%" id="F1g">
    <stop stop-color="#00FF00" offset="0%" id="F1gst1"/>
    <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>

Answer 1

一个解决方案是仅使用 javascript 而不是使用 css and/or svg-props 对其进行动画处理。例如：

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);

Answer 2

@Thomas But i need this for ((CountChecked / CountAllCheckboxes) * 100) + '%'. It will be so many mask and functions.

它是一个掩码和一个函数，这里是一个简短的片段：

const scale = Array.from(Array(101), (_,i,a) => 90*(100-i)/100);
document.querySelector("svg #scale").setAttributeNS(null, "d", scale.filter((v,i) => i && i<100 && i%10 === 0).map(v => `M20,${v},25,${v}`).join(""));

setInterval(function(){
  let percent = Math.floor(Math.random() * 100);
  document.querySelector("div").textContent = percent + "%";
  document.querySelector("svg #red").style.setProperty("transform", `translateY(${scale[percent]}px)`)
}, 1000);

svg {
  max-width: 100px;
  max-height: 200px;
}

svg #red {
  transition: transform 300ms;
}

<div></div>
<svg viewbox="0,0,50,100">
<mask id="myMask">
  <line x1=25 y1=5 x2=25 y2=80 stroke="white" stroke-width="10" stroke-linecap="round" />
  <circle cx=25 cy=90 r=10 fill="white" />
</mask>

<g mask="url(#myMask)">
  <rect x=0 y=0 width=50 height=100 fill="#AAA" />
  <rect id="red" x=0 y=0 width=50 height=100 fill="red" />
  <path id="scale" stroke="#888" stroke-width="0.5" d=""/>
</g>
</svg>

Answer 3

<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);
});

svg 填充的平滑动画

Smooth animate for svg fill

javascript

css

jquery

svg

svg-animate