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

Question

I have this SVG animation HERE , now if you see the SVG, you will see that the dashed lines get drawn, the code that draws the lines is as follows:

$(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");

}); 

Now the animation drawing for the first black dashed line is perfect, but the drawing animation for second dashed line (the yellow dashed line) is not the way I want it to be, IE I would really like is the line gets drawn in the opposite direction, as of now the arrow gets drawn first, what I really want is for the animation to start from the end of the line, how do I make that possible?

Answer 1

You just need to reverse the linearGradient definition for the yellow gradient like in the below code block and also reverse the corresponding jQuery code.

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

Fiddle Demo