Javascript 如何从行尾（SVG）绘制动画？

我有一个SVG动画，现在如果您看到SVG，您将看到绘制虚线，绘制线的代码如下所示：

$(document).ready(function() {

  $("#sec-three").waypoint(function(direction) {

    /* code for first line animation */
    var offset = parseInt($('#move-opacity').attr("offset"));
    setInterval(function() {
      $('#move-opacity').attr("offset", offset + "%");
      if (offset < 100) {
        $('#last-opacity').attr("offset", (offset + 1) + "%");
      }
      offset++;

    }, 25);

    /* code for secound line animation */
    var offset1 = parseInt($('#move-opacity-1').attr('offset'));
    setInterval(function() {
      $('#move-opacity-1').attr("offset", offset + "%");
      if (offset < 90) {
        $('#last-opacity-1').attr("offset", (offset + 1) + "%");
      }
      offset++;

    }, 25);

    $("#lock").attr( "class" , "animated bounceInUp");
    $("#quote-icon").attr( "class" , "animated bounceInUp delay-05s");

  }, {
    offset: '75%' 
  });   

    $("#lock").addClass("animated bounceInUp");

}); 

$（文档）.ready（函数（）{
$（“第三节”）.航路点（功能（方向）{
/*第一行动画代码*/
var offset=parseInt（$（'#move opacity'）.attr（“offset”）；
setInterval（函数（）{
$（“#移动不透明度”）.attr（“偏移量”，偏移量+“%”）；
如果（偏移量<100）{
$（'last opacity'）.attr（“偏移量”，（偏移量+1）+“%”；
}
offset++；
}, 25);
/*secound线动画代码*/
var offset1=parseInt（$（'move-opacity-1'）.attr（'offset'）；
setInterval（函数（）{
$（'move-opacity-1'）.attr（“offset”，offset+“%”）；
如果（偏移量<90）{
$（'last-opacity-1'）.attr（“偏移量”，（偏移量+1）+“%”；
}
offset++；
}, 25);
$（“#锁”）.attr（“类”，“动画反弹”）；
$（“#quote icon”）.attr（“类”，“动画弹跳延迟-05s”）；
}, {
抵销：“75%”
});   
$（“#锁”）.addClass（“动画弹跳”）；
}); 

---

现在，第一条黑色虚线的动画绘制是完美的，但第二条虚线（黄色虚线）的绘制动画不是我想要的方式，也就是说，我真的希望是以相反的方向绘制线，现在箭头先绘制，我真正想要的是动画从线的末端开始，我如何才能做到这一点

您只需要反转黄色渐变的

linearGradient

定义，就像下面的代码块一样，还需要反转相应的jQuery代码

<defs>
  <linearGradient id="yellow-gradient">
    <stop offset="100%" id="move-opacity-1" stop-opacity="0" stop-color="#ffde17" />
    <stop offset="100%" id="last-opacity-1" stop-opacity="1" stop-color="#ffde17" />
  </linearGradient>
</defs>

var offset1 = parseInt($('#move-opacity-1').attr('offset'));
setInterval(function() {
  if (offset1 > 0) {
    $('#move-opacity-1').attr("offset", offset1 + "%");
    $('#last-opacity-1').attr("offset", (offset1 + 1) + "%");
  }
  offset1--;
}, 25);