How to prevent SVG arrow from being override

I made this simple SVG animation HERE , The code for drawing the dashed lines is below:

$(document).ready(function() {

    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 < 100) {
        $('#last-opacity-1').attr("offset", (offset + 1) + "%");
      }
      offset++;

    }, 25);


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


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

}); 

Now if you notice clearly even the arrow is overridden with a dashed arrow , once the line is drawn , how to prevent this from happening ?

Answers


The actual problem is because the polygon that produces the arrow head already has class='st0' which produces a yellow colored fill and the below code is also adding a yellow colored gradient as a stroke to the arrow head and thus you are ending up seeing both.

#dotted-lines-1 {
    stroke: url(#yellow-gradient);
    fill: none;
    stroke-width:3;
    stroke-miterlimit: 10;
    stroke-dasharray:4.8732,2.9239;
}
#dotted-lines-2 {
    stroke: url(#yellow-gradient);
    fill: none !important;
    stroke-width:3;
    stroke-miterlimit: 10;
    stroke-dasharray:4.8732,2.9239;
}

To overcome the issue, apply the yellow gradient only to the line and path elements within the g like in the below code block.

#dotted-lines-1 line, #dotted-lines-1 path {
    stroke: url(#yellow-gradient);
    fill: none;
    stroke-width:3;
    stroke-miterlimit: 10;
    stroke-dasharray:4.8732,2.9239;
}
#dotted-lines-2 line, #dotted-lines-2 path {
    stroke: url(#yellow-gradient);
    fill: none !important;
    stroke-width:3;
    stroke-miterlimit: 10;
    stroke-dasharray:4.8732,2.9239;
}

Fiddle Demo


Need Your Help

How I can create doc file from php file

php pdf file-io doc

I have a resume building site. In which user input their information and finally we need to create his resume in doc or pdf file.

Does calling delete from inside a destructor cause stack overflow?

c++ memory-management stack-overflow destructor

The following code creates a double pointer B** to a B*. It'll use that pointer to allocate memory for another pointer which will point to a B instance created when start() is called: